cyber-narrator-cn-ui/src/views/location/Index.vue

<template>
  <div class="geo-analysis">
    <el-tabs v-model="activeTab"  class="location-tabs">
      <el-tab-pane :label="$t('location.locationMap')" name="locationMap"></el-tab-pane>
      <el-tab-pane :label="$t('location.traceTracking')" name="traceTracking">
        <template #label>
          <div class="traceTracking-tabs_label">
            {{$t('location.traceTracking')}}
            <div class="traceTracking-num" :style="`opacity:${opacity};`">
              {{trackingSubscribers.length}}
            </div>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <!-- 右上角工具栏 -->
    <div class="geo-tools">
      <div class="panel__time">
        <date-time-range
            class="date-time-range"
            :start-time="timeFilter.startTime"
            :end-time="timeFilter.endTime"
            :date-range="timeFilter.dateRangeValue"
            ref="dateTimeRange"
            @change="reload"
        />
        <time-refresh
            class="date-time-range"
            @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">
      <!-- 左侧地图 -->
      <div class="analysis-map">
        <simple-loading size="small" placement="top-end" :loading="loading.mapLoading" v-if="activeTab === 'locationMap'" :style="rightExpanded ? 'right: 332px;' : ''"></simple-loading>
        <simple-loading size="small" placement="top-end" :loading="loading.trackingMapLoading" v-else-if="activeTab === 'traceTracking'"></simple-loading>
        <div id="analysisMap"></div>
      </div>
      <!-- locationMap地图底部的时间轴 -->
      <div class="map-time-line">
        <time-line v-if="activeTab === 'locationMap'" :timeFilter="timeFilter" @change="mapTimeLineChange"></time-line>
      </div>
      <!-- 左右侧控制箭头 -->
      <el-icon
          class="analysis-statistics-arrow analysis-statistics-arrow--left"
          :class="leftExpanded ? 'analysis-statistics-arrow--left-expanded' : ''"
          @click="leftExpanded = !leftExpanded"
          v-show="activeTab === 'locationMap'"
      >
        <ArrowLeft v-if="leftExpanded"/>
        <ArrowRight v-else />
      </el-icon>
      <el-icon
          class="analysis-statistics-arrow analysis-statistics-arrow--right"
          :class="rightExpanded ? 'analysis-statistics-arrow--right-expanded' : ''"
          @click="rightExpanded = !rightExpanded"
          v-show="activeTab === 'locationMap'"
      >
        <ArrowRight v-if="rightExpanded"/>
        <ArrowLeft v-else />
      </el-icon>
      <!-- 左侧统计栏 -->
      <div class="analysis-statistics analysis-statistics--left-drawer"
           :class="`analysis-statistics--${leftExpanded ? 'expanded' : 'collapsed'}`"
           v-show="activeTab === 'locationMap'">
        <!-- 饼图-地图色块统计 -->
        <div class="analysis-statistics__chart">
          <simple-loading size="small" placement="top-end" :loading="loading.pieLoading"></simple-loading>
          <div class="chart__header">{{$t('location.populationDensity')}}</div>
          <div class="chart__body">
            <div class="chart__drawing" id="populationDensityChart"></div>
            <div class="chart__legend">
              <div v-for="legend in pieValueRamp" class="legend-item" :key="legend.color">
                <div class="legend-icon" :style="`background:rgba(${legend.color},.7);`"></div>
                <div class="legend-range" >{{legend.name}}</div>
                <div class="legend-count">{{legend.count}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 折线图-活跃subscriber -->
        <div class="analysis-statistics__chart">
          <simple-loading size="small" placement="top-end" :loading="loading.lineLoading"></simple-loading>
          <div class="chart__header">{{$t('location.activeSubscribers')}}</div>
          <div class="chart__statistics">
            <div class="statistics-number">{{activeCount}}</div>
            <div class="statistics-trend">{{activeCountChain === '-' ? '-' : (activeCountChain < 0 ? '-'+valueToRangeValue(Math.abs(activeCountChain), unitTypes.percent).join(' '): valueToRangeValue(activeCountChain, unitTypes.percent).join(' '))}}</div>
          </div>
          <div class="chart-line__drawing" id="activeSubscribersChart"></div>
        </div>
        <!-- 单值图-基站数量 -->
        <div class="analysis-statistics__chart">
          <simple-loading size="small" placement="top-end" :loading="loading.baseStationLoading"></simple-loading>
          <div class="chart__header">{{$t('location.totalBaseStation')}}</div>
          <div class="chart__value">{{baseStationMarkers.length}}</div>
        </div>
      </div>
      <!-- 右侧数据栏-map -->
      <div class="analysis-statistics analysis-statistics--right-drawer"
           :class="`analysis-statistics--${rightExpanded ? 'expanded' : 'collapsed'}`"
           v-show="activeTab === 'locationMap'"
      >
        <!-- subscriber list -->
        <div class="analysis-statistics__title">
          <div class="title__content">{{$t('location.subscribers')}}:&nbsp;{{subscribersTotalCount}}<!--<div class="title__icon">{{subscribersTotalCount}}</div>--></div>
          <simple-loading :loading="loading.subscriberLoading" placement="right" size="small"></simple-loading>
        </div>
        <div class="analysis-statistics__search-list">
          <template v-for="search in searchList">
            <template v-if="search.active === 1">
              <el-input v-if="search.type === 'input'"
                        :key="search.label"
                        size="small"
                        v-model="search.value"
                        @input="debounceSearch"
                        clearable
              >
                <template #prepend>{{search.label}}</template>
              </el-input>
              <el-input v-if="search.type === 'select'"
                        class="input-to-select"
                        :key="search.label"
                        size="small"
              >
                <template #prepend>{{search.label}}</template>
                <template #append>
                  <el-select
                      size="small"
                      v-model="search.value"
                      style="width: 100%"
                      :placeholder="$t('overall.all')"
                  >
                    <el-option
                        v-for="option in search.options"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                    />
                  </el-select>
                </template>
              </el-input>
            </template>
          </template>
          <div style="display: flex; justify-content: space-between">
            <el-dropdown trigger="click" :hide-on-click="false" ref="searchItemList">
              <button class="business-button business-button--light">{{$t('overall.more')}}</button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                      v-for="search in searchList"
                      :key="search.label"
                  >
                    <el-checkbox
                      v-model="search.active"
                      :true-value="1"
                      :false-value="0"
                      size="small"
                      :label="search.label"/>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-checkbox style="margin-right: 15px;" v-model="onlyShowFollowed" @change="showFollowedSubscribers" :label="$t('location.onlyFollowed')" size="small" />
          </div>
          </div>
        <div class="analysis-statistics__subscribers" @scroll="scrollList" id="locationMap-subscriber-scroll" :style="computeListHeight">
          <template v-for="item in subscribersList" :key="item.subscriberId">
            <div class="analysis-statistics__subscriber"
                 @click="subscriberListClick(item)"
                 @mouseenter="subscriberListMouseEnter(item)"
                 @mouseleave="subscriberListMouseLeave(item)"
                 :id="`locationMap-subscriberId-${item.subscriberId}`"
                 :class="highlightSubscriber.subscriberId === item.subscriberId ? 'analysis-statistics__subscriber--active' : ''"
            >
              <div class="subscriber__header" :class="item.active === 1 ? '' : 'subscriber__header-inactive'" >
                <div class="header__icon">
                  <div class="icon__box">
                    <svg v-if="item.dataSource.indexOf('Session Record') > -1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M244.784762 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.241904L244.784762 690.468571zM81.92 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.571428 8.435809l-99.181715-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.634285 193.487238 88.405333 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.182857 27.160381c-5.851429 2.048-12.092952 3.120762-18.383239 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.168762L243.712 623.177143a84.894476 84.894476 0 0 1-24.868571-80.700953l34.523428-146.919619c-3.413333 2.340571-7.070476 4.388571-10.776381 6.290286a58.806857 58.806857 0 0 0-22.674286 22.723048L168.228571 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.448C298.179048 58.465524 351.963429 17.066667 411.745524 23.30819 471.478857 29.549714 514.633143 81.13981 508.099048 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" fill="#FFFFFF"></path><path d="M734.793143 532.918857l-27.89181-13.897143A308.175238 308.175238 0 0 1 536.380952 243.029333v-73.142857a32.621714 32.621714 0 0 1 18.188191-29.403428l172.958476-86.552381a49.347048 49.347048 0 0 1 43.885714 0l172.958477 86.552381a32.670476 32.670476 0 0 1 18.236952 29.403428v73.142857a308.272762 308.272762 0 0 1-170.520381 275.992381l-27.89181 13.897143a33.304381 33.304381 0 0 1-29.403428 0z" fill="#FA901C"></path><path d="M722.456381 414.232381a27.014095 27.014095 0 1 0 54.02819 0 27.014095 27.014095 0 0 0-54.02819 0zM722.456381 181.735619v151.405714a24.771048 24.771048 0 0 0 27.014095 25.209905 24.771048 24.771048 0 0 0 27.014095-25.209905V181.735619a24.771048 24.771048 0 0 0-27.014095-25.258667 24.771048 24.771048 0 0 0-27.014095 25.258667z" fill="#FFFFFF"></path></svg>
                    <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><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>
                  </div>
                </div>
                <div class="header__right">
                  <div class="header-msisdn">
                    <div class="header__title">
                      <span>ID</span>
                      <el-tooltip
                          effect="light"
                          trigger="hover"
                          :content="$t('entity.jumpToEntityDetails')"
                          placement="right"
                          popper-class="panel-tooltip"
                      >
                        <i class="cn-icon cn-icon-jump-to" @click="jumpEntityDetail(item)" v-show="item.showJumpToEntity"></i>
                      </el-tooltip>
                    </div>
                    <div class="header__content">{{$_.get(item, 'subscriberId', '-') || '-'}}</div>
                  </div>
                  <div class="header__operation">
                    <div class="trajectory-text" @click.stop="addOrRemoveTrackingSubscriber(item)">
                        <i class="cn-icon" :class="symbolClass(item)"></i>{{$t('location.track')}}
                    </div>
                    <div class="cancel-follow">
                      <i class="cn-icon-follow-fill cn-icon" v-if="item.isFollowed === 1"  @click.stop="cancelFollowSubscribers(item)"></i>
                      <i class="cn-icon-follow cn-icon" v-else @click.stop="followSubscribers(item)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="subscriber__body">
                <span class="subscriber-tags">
                  <span v-for="tag in item.tags"
                        :key="tag.value"
                        class="subscriber-tag"
                        :style="getTagColor(tag.color)">
                    {{ tag.value }}
                  </span>
                </span>
                <div class="body__item">
                  <div class="item__label">MSISDN</div>
                  <div class="item__value">{{item.phoneNumber || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">IMEI</div>
                  <div class="item__value">{{item.imei || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">IMSI</div>
                  <div class="item__value">{{item.imsi || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">APN</div>
                  <div class="item__value">{{item.apn || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">{{$t('location.location')}}</div>
                  <div class="item__value">{{locationHandler(item)}}</div>
                </div>
              </div>
            </div>
          </template>
          <div style="height: 40px;"></div>
        </div>
        <div style="position: absolute; bottom: 0; height: 40px; width: 100%; background-color: rgba(255,255,255,.8);"></div>
      </div>
      <!-- 右侧数据栏-trace -->
      <div class="analysis-statistics" :style="activeTab === 'traceTracking' ? 'overflow-y: scroll' : ''" id="subscribersBlock" v-show="activeTab === 'traceTracking'">
        <div class="analysis-statistics__no-tracking-tip" v-if="trackingSubscribers.length === 0" @click="activeTab = 'locationMap'">{{$t('location.noTrackingYet')}}</div>
        <div v-else class="analysis-statistics__search-list">
          <el-input class="input-to-select"
                    size="small"
                    style="margin-bottom: 0;"
          >
            <template #prepend>{{searchList[3].label}}</template>
            <template #append>
              <el-select
                  size="small"
                  v-model="searchList[3].value"
                  style="width: 100%"
                  :placeholder="$t('overall.all')"
                  @change="trackingSourceChange"
              >
                <el-option
                    v-for="option in searchList[3].options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                />
              </el-select>
            </template>
          </el-input>
        </div>
        <div class="analysis-statistics__subscribers">
          <template v-for="(subscriber, index) in trackingSubscribers" :key="subscriber.subscriberId">
            <div
                class="analysis-statistics__subscriber"
                :class="currentShowSubscriber && currentShowSubscriber.subscriberId === subscriber.subscriberId ? 'analysis-statistics__subscriber--active' : ''"
                @mouseenter="subscriber.showJumpToEntity = true"
                @mouseleave="subscriber.showJumpToEntity = false"
                @click="changeCurrentShowSubscriber(subscriber)">
              <div class="subscriber__header" :class="trackingSubscriberRecordMap[subscriber.subscriberId] && trackingSubscriberRecordMap[subscriber.subscriberId].length > 0 ? '' : 'subscriber__header-inactive'">
                <div class="header__icon">
                  <div class="icon__box">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><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>
                  </div>
                </div>
                <div class="header__right">
                  <div class="header-msisdn">
                    <div class="header__title">
                      <span>ID</span>
                      <el-tooltip
                          effect="light"
                          trigger="hover"
                          :content="$t('entity.jumpToEntityDetails')"
                          placement="right"
                          popper-class="panel-tooltip"
                      >
                        <i class="cn-icon cn-icon-jump-to" @click="jumpEntityDetail(subscriber)" v-show="subscriber.showJumpToEntity"></i>
                      </el-tooltip>
                    </div>
                    <div class="header__content">{{$_.get(subscriber, 'subscriberId', '-') || '-'}}</div>
                  </div>
                  <div class="header__operation">
                    <div class="cancel-follow" @click.stop="removeTrackingSubscriber(subscriber)">
                      <i class="cn-icon-close cn-icon"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="subscriber__body">
                <span class="subscriber-tags">
                  <span v-for="tag in subscriber.tags"
                        :key="tag.value"
                        class="subscriber-tag"
                        :style="getTagColor(tag.color)">
                    {{ tag.value }}
                  </span>
                </span>
                <div class="body__item">
                  <div class="item__label">MSISDN</div>
                  <div class="item__value">{{subscriber.phoneNumber || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">IMEI</div>
                  <div class="item__value">{{subscriber.imei || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">IMSI</div>
                  <div class="item__value">{{subscriber.imsi || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">APN</div>
                  <div class="item__value">{{subscriber.apn || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">{{$t('overall.location')}}</div>
                  <div class="item__value">{{locationHandler(subscriber)}}</div>
                </div>
                <div class="body-item-record">
                  <div class="item-record__header">{{ $t('location.trackRecord') }}</div>
                  <template v-if="trackingSubscriberRecordMap[subscriber.subscriberId] && trackingSubscriberRecordMap[subscriber.subscriberId].length > 0">
                    <div class="item-record__info">
                      <div class="circle"></div>
                    </div>
                    <div class="item-record__timeline">
                      <div class="timeline__info">
                        <div class="info-icons">
                          <div class="icon-circle">
                            <i class="cn-icon cn-icon-events2" v-if="trackingSubscriberRecordMap[subscriber.subscriberId].dataSource === 'Session Record'"></i>
                            <div class="circle-circle"></div>
                          </div>
                          <div class="info-line" v-show="subscriber.showLine"></div>
                        </div>
                        <div class="timeline__info--item" @click="timelineClick(subscriber, trackingSubscriberRecordMap[subscriber.subscriberId][0])" @mouseenter="timelineMouseEnter(subscriber, trackingSubscriberRecordMap[subscriber.subscriberId][0])" @mouseleave="timelineMouseLeave(subscriber, trackingSubscriberRecordMap[subscriber.subscriberId][0])">
                          <div>
                            <span>{{$t('overall.location')}}: </span><span class="info--item__value">{{locationHandler(trackingSubscriberRecordMap[subscriber.subscriberId][0])}}</span>
                          </div>
                          <div>
                            <span>{{ $t('location.timeOfArrival') }}: </span><span class="info--item__value">{{dateFormatByAppearance(Number(trackingSubscriberRecordMap[subscriber.subscriberId][0].time))}}</span>
                          </div>
                          <div>
                            <span>{{ $t('location.residenceTime') }}: </span><span class="info--item__value">-</span>
                          </div>
                        </div>
                      </div>

                      <div class="scroll-view" @scroll="onScroll" :id="subscriber.subscriberId" v-show="subscriber.show">
                        <!-- 虚拟列表 -->
                        <div class="virtual-scroller" :style="`height: ${subscriber.listHeight}px`"></div>
                        <div class="scroll-list" :style="`transform: translateY(${subscriber.startOffset}px)`">
                          <div class="scroll__item"
                               v-for="(record, index) in trackingSubscriberRecordMap[subscriber.subscriberId].slice(subscriber.scrollStartIndex, subscriber.scrollEndIndex)"
                               :key="index"
                               @click="timelineClick(subscriber, record)"
                               @mouseenter="timelineMouseEnter(subscriber, record)"
                               @mouseleave="timelineMouseLeave(subscriber, record)">
                            <div class="item-icons">
                              <div class="icon-circle">
                                <i class="cn-icon cn-icon-events2" v-if="record.dataSource === 'Session Record'"></i>
                                <div class="circle-circle" :class="record.dataSource === highlightTrackingTimeline.dataSource && record.time === highlightTrackingTimeline.time ? 'circle-circle__highlight' : ''"></div>
                              </div>
                              <div class="item-line"></div>
                            </div>
                            <div class="item-content">
                              <div style="width: 217px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
                                <span>{{$t('overall.location')}}: </span><span class="item__value" :title="locationHandler(record)">{{locationHandler(record)}}</span>
                              </div>
                              <div>
                                <span>{{ $t('location.timeOfArrival') }}: </span><span class="item__value">{{dateFormatByAppearance(Number(record.time))}}</span>
                              </div>
                              <div>
                                <span>{{ $t('location.residenceTime') }}: </span><span class="item__value">{{record.stayTime}}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div :class="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'item-record__btn-disabled' : 'item-record__btn'" @click.stop="clickTrackBlock(index)">
                        <span v-if="!subscriber.show"><i class="cn-icon cn-icon-down2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: var(var(--el-color-info-light-5))' : ''"></i></span>
                        <span v-if="subscriber.show"><i class="cn-icon cn-icon-up2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: var(var(--el-color-info-light-5)' : ''"></i></span>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- tooltip -->
    <div class="geo-analysis__hexagon-tooltip" id="tooltip" :class="`geo-analysis__hexagon-tooltip--${tooltip.type}`" v-if="tooltip.showMarkerTooltip || tooltip.showPolygonTooltip" :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}" @mouseenter="tooltipMouseEnter" @mouseleave="tooltipMouseLeave">
      <div class="hexagon-tooltip__header" :style="`background-color: ${tooltipHeaderColor}`">
        <div class="header__icon">
          <svg v-if="tooltip.type === tooltipType.hexagon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M747.52 921.088H277.504L42.496 514.048l235.008-407.04H747.52l235.008 407.04-235.008 407.04z m-425.472-76.8h381.44l190.464-330.24-190.464-330.24h-381.44l-190.464 330.24 190.464 330.24z"></path></svg>
          <template v-else-if="tooltip.type === tooltipType.human">
            <div class="icon__box">
              <svg v-if="currentSubscriber.isSessionRecord" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M244.784762 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.241904L244.784762 690.468571zM81.92 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.571428 8.435809l-99.181715-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.634285 193.487238 88.405333 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.182857 27.160381c-5.851429 2.048-12.092952 3.120762-18.383239 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.168762L243.712 623.177143a84.894476 84.894476 0 0 1-24.868571-80.700953l34.523428-146.919619c-3.413333 2.340571-7.070476 4.388571-10.776381 6.290286a58.806857 58.806857 0 0 0-22.674286 22.723048L168.228571 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.448C298.179048 58.465524 351.963429 17.066667 411.745524 23.30819 471.478857 29.549714 514.633143 81.13981 508.099048 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" fill="#FFFFFF"></path><path d="M734.793143 532.918857l-27.89181-13.897143A308.175238 308.175238 0 0 1 536.380952 243.029333v-73.142857a32.621714 32.621714 0 0 1 18.188191-29.403428l172.958476-86.552381a49.347048 49.347048 0 0 1 43.885714 0l172.958477 86.552381a32.670476 32.670476 0 0 1 18.236952 29.403428v73.142857a308.272762 308.272762 0 0 1-170.520381 275.992381l-27.89181 13.897143a33.304381 33.304381 0 0 1-29.403428 0z" fill="#FA901C"></path><path d="M722.456381 414.232381a27.014095 27.014095 0 1 0 54.02819 0 27.014095 27.014095 0 0 0-54.02819 0zM722.456381 181.735619v151.405714a24.771048 24.771048 0 0 0 27.014095 25.209905 24.771048 24.771048 0 0 0 27.014095-25.209905V181.735619a24.771048 24.771048 0 0 0-27.014095-25.258667 24.771048 24.771048 0 0 0-27.014095 25.258667z" fill="#FFFFFF"></path></svg>
              <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><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>
            </div>
          </template>
          <template v-else-if="tooltip.type === tooltipType.baseStation">
            <div class="icon__box">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M952.182154 904.113231h-99.800616c-0.118154 0-232.093538-570.683077-232.093538-570.683077 49.427692-31.192615 79.832615-84.361846 79.832615-142.926769A171.047385 171.047385 0 0 0 529.545846 19.692308a170.417231 170.417231 0 0 0-170.574769 170.259692c0 55.768615 26.860308 106.535385 72.231385 138.633846L188.278154 904.113231H107.657846c-29.026462 0-52.499692 21.070769-52.499692 50.097231 0 28.987077 23.512615 50.097231 52.499692 50.09723h844.563692c28.987077 0 52.460308-21.110154 52.460308-50.136615 0-28.987077-23.512615-50.057846-52.460308-50.057846h-0.039384zM524.544 392.664615l33.161846 85.858462h-66.441846l33.28-85.858462z m-91.451077 235.992616h182.744615l38.872616 100.155077H394.259692l38.833231-100.155077z m-106.653538 275.456l29.144615-75.106462h333.351385l28.908307 75.106462H326.4h0.039385z"></path></svg>
            </div>
          </template>
          <template v-else-if="tooltip.type === tooltipType.cell">
            <div class="icon__box">
              <svg viewBox="0 0 1365 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M186.847004 720.554667a559.104 559.104 0 0 1-43.121777-217.656889c0-75.093333 14.336-150.186667 43.235555-217.656889 21.504-67.584 64.625778-127.658667 114.915556-180.110222L201.183004 0A711.793778 711.793778 0 0 0 50.313671 232.675556 719.303111 719.303111 0 0 0 0.023893 502.897778c0 90.112 14.336 187.733333 50.289778 270.222222 35.953778 82.602667 86.243556 165.205333 150.869333 232.675556l100.693334-105.016889c-50.289778-52.565333-93.411556-112.64-114.915556-180.224z"></path><path d="M316.212338 660.593778c21.617778 52.451556 50.289778 97.507556 86.243555 135.054222l100.579556-105.130667a333.027556 333.027556 0 0 1-57.457778-82.488889c-7.168-37.546667-14.449778-67.584-14.449778-105.130666 0-37.546667 7.281778-67.584 21.617778-97.507556 7.168-37.546667 28.785778-60.074667 50.289778-90.112l-100.579556-105.130666c-35.953778 37.546667-64.739556 82.602667-86.243555 135.168a407.324444 407.324444 0 0 0-28.785778 157.582222c0 52.565333 7.168 105.130667 28.785778 157.696zM574.943004 502.897778c0 62.236444 48.241778 112.64 107.747556 112.64 59.505778 0 107.747556-50.403556 107.747556-112.64 0-62.122667-48.241778-112.64-107.747556-112.64-59.505778 0-107.747556 50.517333-107.747556 112.64zM862.345671 690.631111l100.579556 105.016889c35.953778-37.546667 64.739556-82.602667 86.243555-135.054222a407.324444 407.324444 0 0 0 28.785778-157.696 407.324444 407.324444 0 0 0-28.785778-157.582222 427.690667 427.690667 0 0 0-86.243555-135.168l-100.579556 105.130666c21.617778 22.528 43.121778 52.565333 57.457778 82.602667 14.449778 29.923556 21.617778 67.470222 21.617778 97.507555 0 37.546667-7.168 67.584-21.617778 97.621334-14.336 45.056-35.953778 67.584-57.457778 97.507555z"></path><path d="M1315.067449 232.675556A711.793778 711.793778 0 0 0 1164.198116 0l-100.693334 105.130667c50.289778 52.451556 86.243556 112.64 114.915556 180.110222 28.899556 67.584 43.235556 142.563556 43.235555 217.656889 0 75.093333-14.336 150.186667-43.235555 217.656889-28.672 67.584-64.625778 127.658667-114.915556 180.224l100.693334 105.016889a711.793778 711.793778 0 0 0 150.869333-232.675556A719.303111 719.303111 0 0 0 1365.357227 502.897778c0-90.112-14.336-187.733333-50.289778-270.222222z"></path></svg>
            </div>
          </template>
        </div>
        <div class="header__title">
          <template v-if="tooltip.type === tooltipType.hexagon">HEX</template>
          <template v-else-if="tooltip.type === tooltipType.human">ID</template>
          <template v-else-if="tooltip.type === tooltipType.baseStation">NodeB ID</template>
          <template v-else-if="tooltip.type === tooltipType.cell">ID</template>
        </div>
        <div class="header__content">
          <template v-if="tooltip.type === tooltipType.hexagon">{{currentPolygon.hexId}}</template>
          <template v-else-if="tooltip.type === tooltipType.human">{{currentSubscriber.subscriberId || '-'}}</template>
          <template v-else-if="tooltip.type === tooltipType.baseStation">{{currentBaseStation.nodebId}}</template>
          <template v-else-if="tooltip.type === tooltipType.cell">{{currentCell.id}}</template>
        </div>
      </div>
      <div class="hexagon-tooltip__body">
        <span class="subscriber-tags" v-if="tooltip.type === tooltipType.human">
          <span v-for="tag in currentSubscriber.tags"
                :key="tag.value"
                class="subscriber-tag"
                :style="getTagColor(tag.color)">
            {{ tag.value }}
          </span>
        </span>
        <template v-if="tooltip.type === tooltipType.hexagon">
          <template v-if="activeTab === 'locationMap'">
            <div class="body__item">
              <div class="item__label">{{ $t('location.number') }}</div>
              <div class="item__value">{{currentPolygon.number}}</div>
            </div>
          </template>
          <template v-else>
            <span class="body__header">{{locationHandler(JSON.parse(currentPolygon.locations)[0])}}</span>
            <template v-for="(item, i) in JSON.parse(currentPolygon.locations)" :key="item.hexId">
              <div class="body__timeline" v-if="i < 5">
                <div class="timeline-symbol"></div>
                <div>
                  <div class="body__item">
                    <div class="item__value">{{dateFormatByAppearance(Number(item.time))}}</div>
                  </div>
                </div>
              </div>
            </template>
            <div class="body__timeline" v-if="JSON.parse(currentPolygon.locations).length > 5">...</div>
          </template>
        </template>
        <template v-else-if="tooltip.type === tooltipType.human">
          <div class="body__item">
            <div class="item__label">MSISDN</div>
            <div class="item__value">{{currentSubscriber.phoneNumber || '-'}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">IMEI</div>
            <div class="item__value">{{currentSubscriber.imei || '-'}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">IMSI</div>
            <div class="item__value">{{currentSubscriber.imsi || '-'}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">APN</div>
            <div class="item__value">{{currentSubscriber.apn || '-'}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">{{$t('overall.location')}}</div>
            <div class="item__value">{{locationHandler(currentSubscriber)}}</div>
          </div>
          <div class="body__tracking" @click="trackSubscriber(currentSubscriber)">{{$t('location.traceTracking')}}</div>
        </template>
        <template v-else-if="tooltip.type === tooltipType.baseStation">
          <div class="body__item" v-if="currentBaseStation.operator">
            <div class="item__label">{{$t('location.operator')}}</div>
            <div class="item__value">{{currentBaseStation.operator}}</div>
          </div>
          <div class="body__item" v-if="currentBaseStation.lacTac">
            <div class="item__label">LAC/TAC</div>
            <div class="item__value">{{currentBaseStation.lacTac}}</div>
          </div>
          <div class="body__item" v-if="currentBaseStation.mcc">
            <div class="item__label">MCC</div>
            <div class="item__value">{{currentBaseStation.mcc}}</div>
          </div>
          <div class="body__item" v-if="currentBaseStation.mnc">
            <div class="item__label">MNC</div>
            <div class="item__value">{{currentBaseStation.mnc}}</div>
          </div>
          <div class="body__item" v-if="currentBaseStation.technology">
            <div class="item__label">{{$t('overall.technology')}}</div>
            <div class="item__value">{{currentBaseStation.technology}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">{{$t('overall.location')}}</div>
            <div class="item__value">{{locationHandler(currentBaseStation)}}</div>
          </div>
        </template>
        <template v-else-if="tooltip.type === tooltipType.cell">
          <div class="body__item" v-if="currentCell.cellId">
            <div class="item__label">Cell ID</div>
            <div class="item__value">{{currentCell.cellId}}</div>
          </div>
          <div class="body__item" v-if="currentCell.operator">
            <div class="item__label">{{$t('location.operator')}}</div>
            <div class="item__value">{{currentCell.operator}}</div>
          </div>
          <div class="body__item" v-if="currentCell.azimuth">
            <div class="item__label">{{$t('location.azimuth')}}</div>
            <div class="item__value">{{currentCell.azimuth}}</div>
          </div>
          <div class="body__item" v-if="currentCell.coverageRadius">
            <div class="item__label">{{$t('location.coverageRadius')}}</div>
            <div class="item__value">{{currentCell.coverageRadius}}m</div>
          </div>
          <div class="body__item" v-if="currentCell.vendor">
            <div class="item__label">{{$t('overall.vendor')}}</div>
            <div class="item__value">{{currentCell.vendor}}</div>
          </div>
          <div class="body__item" v-if="currentCell.fddSpectrum">
            <div class="item__label">{{$t('location.fddSpectrum')}}</div>
            <div class="item__value">{{currentCell.fddSpectrum}}</div>
          </div>
        </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" @handleCancelFollowBatch="handleCancelFollowBatch"/>
    </el-drawer>
  </div>
</template>

<script>
import { ref, shallowRef } from 'vue'
import { dateFormatByAppearance, getNowTime, getSecond } from '@/utils/date-util'
import maplibregl from 'maplibre-gl'
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
import 'maplibre-gl/dist/maplibre-gl.css'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import {
  unitTypes,
  storageKey,
  defaultMapConfig,
  mapLevelField,
  intentColor,
  entityDefaultColor
} from '@/utils/constants'
import * as echarts from 'echarts'
import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
import { pieOption } from '@/views/location/chartOption'
import _ from 'lodash'
import { useRoute, useRouter } from 'vue-router'
import { urlParamsHandler, overwriteUrl, getTagColor } from '@/utils/tools'
import axios from 'axios'
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'
import * as turf from '@turf/turf'
import { generateRectanglePolygon } from '@/utils/geo-utils'
import i18n from '@/i18n'

// import testData from './test'

const humanSvg = '<svg viewBox="0 0 1024 1024" 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 humanLeakedSvg = '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M244.784762 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.241904L244.784762 690.468571zM81.92 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.571428 8.435809l-99.181715-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.634285 193.487238 88.405333 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.182857 27.160381c-5.851429 2.048-12.092952 3.120762-18.383239 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.168762L243.712 623.177143a84.894476 84.894476 0 0 1-24.868571-80.700953l34.523428-146.919619c-3.413333 2.340571-7.070476 4.388571-10.776381 6.290286a58.806857 58.806857 0 0 0-22.674286 22.723048L168.228571 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.448C298.179048 58.465524 351.963429 17.066667 411.745524 23.30819 471.478857 29.549714 514.633143 81.13981 508.099048 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" fill="#FFFFFF"></path><path d="M734.793143 532.918857l-27.89181-13.897143A308.175238 308.175238 0 0 1 536.380952 243.029333v-73.142857a32.621714 32.621714 0 0 1 18.188191-29.403428l172.958476-86.552381a49.347048 49.347048 0 0 1 43.885714 0l172.958477 86.552381a32.670476 32.670476 0 0 1 18.236952 29.403428v73.142857a308.272762 308.272762 0 0 1-170.520381 275.992381l-27.89181 13.897143a33.304381 33.304381 0 0 1-29.403428 0z" fill="#FA901C"></path><path d="M722.456381 414.232381a27.014095 27.014095 0 1 0 54.02819 0 27.014095 27.014095 0 0 0-54.02819 0zM722.456381 181.735619v151.405714a24.771048 24.771048 0 0 0 27.014095 25.209905 24.771048 24.771048 0 0 0 27.014095-25.209905V181.735619a24.771048 24.771048 0 0 0-27.014095-25.258667 24.771048 24.771048 0 0 0-27.014095 25.258667z"></path></svg>'
const baseStationSvg = '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M952.182154 904.113231h-99.800616c-0.118154 0-232.093538-570.683077-232.093538-570.683077 49.427692-31.192615 79.832615-84.361846 79.832615-142.926769A171.047385 171.047385 0 0 0 529.545846 19.692308a170.417231 170.417231 0 0 0-170.574769 170.259692c0 55.768615 26.860308 106.535385 72.231385 138.633846L188.278154 904.113231H107.657846c-29.026462 0-52.499692 21.070769-52.499692 50.097231 0 28.987077 23.512615 50.097231 52.499692 50.09723h844.563692c28.987077 0 52.460308-21.110154 52.460308-50.136615 0-28.987077-23.512615-50.057846-52.460308-50.057846h-0.039384zM524.544 392.664615l33.161846 85.858462h-66.441846l33.28-85.858462z m-91.451077 235.992616h182.744615l38.872616 100.155077H394.259692l38.833231-100.155077z m-106.653538 275.456l29.144615-75.106462h333.351385l28.908307 75.106462H326.4h0.039385z"></path></svg>'
const cellSvg = '<svg viewBox="0 0 1365 1024" xmlns="http://www.w3.org/2000/svg"><path d="M186.847004 720.554667a559.104 559.104 0 0 1-43.121777-217.656889c0-75.093333 14.336-150.186667 43.235555-217.656889 21.504-67.584 64.625778-127.658667 114.915556-180.110222L201.183004 0A711.793778 711.793778 0 0 0 50.313671 232.675556 719.303111 719.303111 0 0 0 0.023893 502.897778c0 90.112 14.336 187.733333 50.289778 270.222222 35.953778 82.602667 86.243556 165.205333 150.869333 232.675556l100.693334-105.016889c-50.289778-52.565333-93.411556-112.64-114.915556-180.224z"></path><path d="M316.212338 660.593778c21.617778 52.451556 50.289778 97.507556 86.243555 135.054222l100.579556-105.130667a333.027556 333.027556 0 0 1-57.457778-82.488889c-7.168-37.546667-14.449778-67.584-14.449778-105.130666 0-37.546667 7.281778-67.584 21.617778-97.507556 7.168-37.546667 28.785778-60.074667 50.289778-90.112l-100.579556-105.130666c-35.953778 37.546667-64.739556 82.602667-86.243555 135.168a407.324444 407.324444 0 0 0-28.785778 157.582222c0 52.565333 7.168 105.130667 28.785778 157.696zM574.943004 502.897778c0 62.236444 48.241778 112.64 107.747556 112.64 59.505778 0 107.747556-50.403556 107.747556-112.64 0-62.122667-48.241778-112.64-107.747556-112.64-59.505778 0-107.747556 50.517333-107.747556 112.64zM862.345671 690.631111l100.579556 105.016889c35.953778-37.546667 64.739556-82.602667 86.243555-135.054222a407.324444 407.324444 0 0 0 28.785778-157.696 407.324444 407.324444 0 0 0-28.785778-157.582222 427.690667 427.690667 0 0 0-86.243555-135.168l-100.579556 105.130666c21.617778 22.528 43.121778 52.565333 57.457778 82.602667 14.449778 29.923556 21.617778 67.470222 21.617778 97.507555 0 37.546667-7.168 67.584-21.617778 97.621334-14.336 45.056-35.953778 67.584-57.457778 97.507555z"></path><path d="M1315.067449 232.675556A711.793778 711.793778 0 0 0 1164.198116 0l-100.693334 105.130667c50.289778 52.451556 86.243556 112.64 114.915556 180.110222 28.899556 67.584 43.235556 142.563556 43.235555 217.656889 0 75.093333-14.336 150.186667-43.235555 217.656889-28.672 67.584-64.625778 127.658667-114.915556 180.224l100.693334 105.016889a711.793778 711.793778 0 0 0 150.869333-232.675556A719.303111 719.303111 0 0 0 1365.357227 502.897778c0-90.112-14.336-187.733333-50.289778-270.222222z"></path></svg>'

export default {
  name: 'Location',
  data () {
    return {
      url: api.location.followedSubscriber,
      blankObject: { // 空白对象
        id: ''
      },
      tooltipType: {
        hexagon: 'hexagon',
        baseStation: 'base-station',
        human: 'human',
        cell: 'cell'
      },
      activeCount: '',
      activeCountChain: '',
      curPageNum: 1,
      activeNames: '',
      initFlag: true,
      emptyTip: '',
      opacity: 1,
      scrollInfo: {
        itemSize: 50, // 一个滚动item高度
        containerHeight: 300 // 滚动列表
      },
      onlyShowFollowed: false,
      busy: false,
      preScrollTop: 0
    }
  },
  mixins: [dataListMixin],
  components: {
    TimeLine,
    SimpleLoading,
    MyFollowBox
  },
  methods: {
    getTagColor,
    dateFormatByAppearance,
    valueToRangeValue,
    async initMap () {
      const _this = this
      if (!this.mapChart) {
        this.mapChart = new maplibregl.Map({
          container: 'analysisMap',
          style: mapStyle,
          center: this.center,
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          zoom: this.defaultZoom
        })
        maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
          fetch(`${params.url.split('://')[1]}`)
            .then(t => {
              if (t.status === 200) {
                t.arrayBuffer().then(arr => {
                  callback(null, arr, null, null)
                })
              } else {
                callback(new Error(`Tile fetch error: ${t.statusText}`))
              }
            })
            .catch(e => {
              callback(new Error(e))
            })
          return { cancel: () => { } }
        })
      }
      this.mapChart.on('load', async function () {
        // 加载地图上的基站，基站不随tab的切换而改变
        const baseStationData = await _this.queryBaseStation()
        _this.renderMarker(baseStationData, _this.tooltipType.baseStation)

        if (_this.activeTab === 'locationMap') {
          await _this.initLocationMapTab()
        } else if (_this.activeTab === 'traceTracking') {
          await _this.initTraceTrackingTab()
        }
        _this.mapChart.off('moveend', _this.debounceVisualChange)
        _this.mapChart.off('zoomend', _this.debounceVisualChange)
        _this.mapChart.on('moveend', _this.debounceVisualChange)
        _this.mapChart.on('zoomend', _this.debounceVisualChange)
      })
    },
    async initLocationMapTab () {
      // 最先渲染右上角饼图
      await this.renderDensityPie()
      // 然后渲染地图的色块、基站、人（包括右侧关注列表），最后渲染右上角折线图
      /* 地图色块 */
      this.updateBoundaryBox()
      const hexagonData = await this.queryHexagon()
      // 将查到的h3hexagon数据转为geojson
      const polygonSourceData = this.hexagonDataConverter(hexagonData, 'locationMap')
      this.mapChart.addSource('hexGrid', {
        type: 'geojson',
        data: polygonSourceData
      })
      this.mapChart.addLayer({
        id: 'hexagon',
        type: 'fill',
        source: 'hexGrid',
        layout: {
          visibility: this.currentZoom >= 9 ? 'visible' : 'none'
        },
        paint: {
          'fill-color': ['get', 'color'],
          'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.7, 0.4]
        }
      })
      // 六边形的鼠标事件
      this.unbindHexagonEvents()
      this.bindHexagonEvents()

      /* 右侧默认显示普通列表 */
      await this.initSubscriberList()

      /* 地图上的人 */
      // const mapFollowedSubscriberData = await this.queryMapFollowedSubscriber()
      // this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human)
      // this.renderMarker(this.subscribersList, this.tooltipType.human)

      /* 右上角折线图 */
      await this.renderActiveSubscribersLine()
    },
    async initTraceTrackingTab () {
      if (this.idFromUrl) {
        const find = this.trackingSubscribers.find(s => s.subscriberId === this.idFromUrl)
        if (find) {
          this.currentShowSubscriber = find
        } else {
          const queryResult = await axios.get(`${api.entity.basicInfo}/subscriber?resource=${this.idFromUrl}`)
          const newRecord = {
            ...queryResult.data.data,
            subscriberId: this.idFromUrl,
            phoneNumber: queryResult.data.data.phone_number,
            show: true,
            showLine: true,
            scrollStartIndex: 1,
            scrollEndIndex: 6,
            startOffset: 0,
            listHeight: 0
          }
          const queryResult2 = await axios.get(`${api.entity.tags}/subscriber?resource=${this.idFromUrl}`)
          if (queryResult2.data.data && queryResult2.data.data.tags) {
            newRecord.tags = queryResult2.data.data.tags.map(tag => {
              return { value: tag.name, color: intentColor[tag.intent] || entityDefaultColor }
            })
          }
          this.trackingSubscribers.push(newRecord)
          this.currentShowSubscriber = newRecord
        }
      }
      await this.queryTraceTracking()
      // 如果未指定展示谁的轨迹，则默认取追踪用户中的第一个
      if (!this.currentShowSubscriber && this.trackingSubscribers.length > 0) {
        this.currentShowSubscriber = this.trackingSubscribers[0]
      }
      const find = this.trackingSubscribers.find(s => s.subscriberId === this.currentShowSubscriber.subscriberId)
      if (find) {
        // 滚动条定位到id所在的dom
        const findIndex = this.trackingSubscribers.findIndex(s => s.subscriberId === this.currentShowSubscriber.subscriberId)
        const dom = document.getElementById('subscribersBlock')
        if (findIndex && dom) {
          await this.$nextTick(() => {
            dom.scrollTop = 207 * findIndex
          })
        }
      }
      this.renderTrackingHexagon()
    },
    async renderDensityPie () {
      const params = {
        ...this.timeFilter,
        level: this.mapLevel
      }
      this.loading.pieLoading = true
      try {
        const response = await axios.get(api.location.density, { params })
        const densityData = response.data.data.filter(d => d.hexId)
        // const densityData = testData
        // 按值的大小分组，并计算各组数量和颜色
        this.pieValueRamp = this.calculateValueRamp(densityData)
        const option = _.cloneDeep(pieOption)
        option.color = this.pieColorRamp.map(c => `rgb(${c},.7)`)
        option.series[0].name = this.$t('location.populationDensity')
        option.series[0].data = this.pieValueRamp.map(r => ({
          value: r.count
        }))
        this.pieOption = option
        if (!this.pieChart) {
          this.pieChart = echarts.init(document.getElementById('populationDensityChart'))
        }
        this.$nextTick(() => {
          this.pieChart.setOption(this.pieOption)
        })
      } catch (e) {
        this.$message.error(this.errorMsgHandler(e))
        if (this.pieChart && this.pieChart.clear) {
          this.pieChart.clear()
        }
        this.pieValueRamp = []
        console.error(e)
      } finally {
        this.loading.pieLoading = false
      }
    },
    async renderActiveSubscribersLine () {
      const params = {
        ...this.timeFilter,
        level: this.mapLevel
      }
      this.loading.lineLoading = true
      try {
        const curCountResponse = await axios.get(api.location.count, { params: { ...params, cycle: 0 } })// 当前周期活跃用户总数
        const preCountResponse = await axios.get(api.location.count, { params: { ...params, cycle: 1 } })// 上一周期活跃用户总数
        this.activeCount = curCountResponse.data.data.total
        const preActiveCount = preCountResponse.data.data.total
        if (preActiveCount !== 0) {
          this.activeCountChain = (this.activeCount - preActiveCount) / preActiveCount
        } else {
          this.activeCountChain = '-'
        }
        const trendResponse = await axios.get(api.location.trend, { params })
        const activeSubscribersData = trendResponse.data.data.result
        const option = _.cloneDeep(appListChartOption)
        option.series[0].data = activeSubscribersData.map(d => {
          return [d[0], d[1], unitTypes.number]
        })
        this.lineOption = option
        if (!this.lineChart) {
          this.lineChart = echarts.init(document.getElementById('activeSubscribersChart'))
        }
        this.lineChart.setOption(this.lineOption)
      } catch (e) {
        this.$message.error(this.errorMsgHandler(e))
        if (this.lineChart && this.lineChart.clear) {
          this.lineChart.clear()
        }
        this.activeCount = ''
        this.activeCountChain = ''
        console.error(e)
      } finally {
        this.loading.lineLoading = false
      }
    },
    async queryHexagon () {
      const params = {
        ...this.boundaryBox,
        ...this.timeFilter,
        level: this.mapLevel
      }
      this.loading.hexagonLoading = true
      try {
        const response = await axios.get(api.location.map, { params })
        return response.data.data
        // return testData
      } catch (e) {
        this.$message.error(this.errorMsgHandler(e))
        console.error(e)
      } finally {
        this.loading.hexagonLoading = false
      }
      return []
    },
    async queryBaseStation () {
      this.loading.baseStationLoading = true
      try {
        /* 这里涉及如何将cell聚类成基站的问题，目前暂时在前端做聚类，根据规则，同一个运营商中，nodeBID是唯一的。因此以nodeBID+operator组合作为聚类依据。
           理论上，同一个nodeBID下的cell的经纬度都是一样的，因此直接取第一个cell的经纬度和地名信息作为基站的经纬度。
           同一个nodeBID下的cell除经纬度外，还有许多属性值是相同的，这里将cell的nodeBID、operator、technology、lacTac、mcc、mnc作为基站的属性来展示，
           将cell的id、cellId、azimuth、coverageRadius、vendor、fddSpectrum作为cell的属性来展示。 */
        const response = await axios.get(api.location.baseStation, { params: { pageSize: -1 } })
        const baseStations = []
        response.data.data.list.forEach(cell => {
          const exist = baseStations.find(bs => bs.nodebId === cell.nodebId && bs.operator === cell.operator)
          if (!exist) {
            baseStations.push({
              nodebId: cell.nodebId,
              operator: cell.operator,
              technology: cell.technology,
              lacTac: cell.lacTac,
              mcc: cell.mcc,
              mnc: cell.mnc,
              latitude: cell.latitude,
              longitude: cell.longitude,
              superAdministrativeArea: cell.superAdministrativeArea,
              administrativeArea: cell.administrativeArea,
              country: cell.country,
              cells: [cell]
            })
          } else {
            exist.cells.push(cell)
          }
        })
        return baseStations
      } catch (e) {
        this.$message.error(this.errorMsgHandler(e))
        console.error(e)
      } finally {
        this.loading.baseStationLoading = false
      }
      return []
    },
    async queryMapFollowedSubscriber () {
      this.loading.timeBarLoading = true
      const params = {
        ...this.minuteTimeFilter,
        level: this.mapLevel,
        pageSize: -1
      }
      try {
        if (this.subscribersList.length > 0) {
          await this.setSubscriberActiveStatus(this.subscribersList)
        }
        const response = await axios.get(api.location.followedSubscriber, { params })
        response.data.data.list.forEach(d => {
          d.isFollowed = 1
        })
        return response.data.data.list
      } catch (e) {
        this.$message.error(this.errorMsgHandler(e))
        console.error(e)
      } finally {
        this.loading.timeBarLoading = false
      }
      return []
    },
    jumpEntityDetail (subscriber) {
      const { href } = this.$router.resolve({
        path: '/entity/detail',
        query: {
          entityType: 'subscriber',
          entityName: subscriber.subscriberId,
          startTime: this.timeFilter.startTime,
          endTime: this.timeFilter.endTime,
          range: this.timeFilter.dateRangeValue
        }
      })
      window.open(href, '_blank')
    },
    async queryTraceTracking () {
      if (this.trackingSubscribers.length > 0) {
        this.loading.trackingMapLoading = true
        const params = {
          ...this.timeFilter,
          subscriberIds: this.trackingSubscribers.map(item => `'${item.subscriberId}'`).join(','),
          level: this.mapLevel
        }
        if (this.searchList[3].value) {
          params.params = `data_source='${this.searchList[3].value}'`
        }
        try {
          const response = await axios.get(api.location.tracking, { params })
          const trackingSubscribers = _.cloneDeep(this.trackingSubscribers)
          if (response.data.data.result) {
            // 过滤掉无位置的无效数据
            response.data.data.result.forEach(item => {
              item.trackRecords = item.trackRecords.filter(t => t.hexId)
            })
            trackingSubscribers.forEach(s => {
              const find = response.data.data.result.find(item => item.subscriberId === s.subscriberId)
              if (find) {
                this.trackingSubscriberRecordMap[s.subscriberId] = find.trackRecords
              } else {
                this.trackingSubscriberRecordMap[s.subscriberId] = []
              }
              s.show = false // 切换到track tracking时就收起时间线
            })
            this.trackingSubscribers = trackingSubscribers
          } else {
            Object.keys(this.trackingSubscriberRecordMap).forEach(k => {
              this.trackingSubscriberRecordMap[k] = []
            })
          }
          // 计算停留时间
          this.trackingSubscribers.forEach((s, index) => {
            const trackRecords = this.trackingSubscriberRecordMap[s.subscriberId]
            // 初始化时间线可视范围角标
            if (trackRecords.length < 6) {
              s.scrollStartIndex = 1
              s.scrollEndIndex = trackRecords.length
            } else {
              s.scrollStartIndex = 1
              s.scrollEndIndex = 6
            }

            if (trackRecords && trackRecords.length > 0) {
              for (let i = 0; i < trackRecords.length; i++) {
                if (i > 0) {
                  if ((trackRecords[i - 1].subscriberLongitude === trackRecords[i].subscriberLongitude) && (trackRecords[i - 1].subscriberLatitude === trackRecords[i].subscriberLatitude)) {
                    // 如果连续两条地址重复，则将时间累加，并将上一条删除，键值-1继续循环
                    if (i > 1 && trackRecords[i - 2]) {
                      const stayTime = unitConvert(trackRecords[i - 2].time - trackRecords[i].time, unitTypes.time, 's')
                      if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) {
                        stayTime[0] = Number(stayTime[0]).toFixed(0)
                      }
                      trackRecords[i].stayTime = stayTime.join(' ')
                    } else {
                      // 数据只有2条，或者第1条和第2条地点重复，删除1，合并时间
                      const stayTime = unitConvert(trackRecords[i - 1].time - trackRecords[i].time, unitTypes.time, 's')
                      if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) {
                        stayTime[0] = Number(stayTime[0]).toFixed(0)
                      }
                      trackRecords[i].stayTime = stayTime.join(' ')
                    }
                    trackRecords.splice(i - 1, 1)
                    i = i - 1
                  } else {
                    const stayTime = unitConvert(trackRecords[i - 1].time - trackRecords[i].time, unitTypes.time, 's')
                    if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) {
                      stayTime[0] = Number(stayTime[0]).toFixed(0)
                    }
                    trackRecords[i].stayTime = stayTime.join(' ')
                  }
                  if (i === trackRecords.length - 1) {
                    // 初始化数据时，重置偏移量和列表高度
                    s.startOffset = 0
                    s.listHeight = i * this.scrollInfo.itemSize
                  }
                }
              }
            }
          })
        } catch (e) {
          this.$message.error(this.errorMsgHandler(e))
          console.error(e)
        } finally {
          this.loading.trackingMapLoading = false
        }
      } else {
        this.loading.trackingMapLoading = false
      }
    },
    moveToCenter (records) {
      const maxLongitude = _.maxBy(records, d => Number(d.subscriberLongitude))
      const maxLatitude = _.maxBy(records, d => Number(d.subscriberLatitude))
      const minLongitude = _.minBy(records, d => Number(d.subscriberLongitude))
      const minLatitude = _.minBy(records, d => Number(d.subscriberLatitude))
      const center = [(maxLongitude.subscriberLongitude + minLongitude.subscriberLongitude) / 2, (maxLatitude.subscriberLatitude + minLatitude.subscriberLatitude) / 2]
      this.mapChart.panTo(center, { duration: 500 })
    },
    renderTrackingHexagon () {
      this.bindTrackingHexagonEvents()
      if (!this.currentShowSubscriber) {
        return true
      }
      const currentShowSubscriberRecords = this.trackingSubscriberRecordMap[this.currentShowSubscriber.subscriberId]
      if (currentShowSubscriberRecords && currentShowSubscriberRecords.length > 0) {
        // 六边形
        this.trackingPolygonSourceData = this.hexagonDataConverter(this.trackingSubscriberRecordMap[this.currentShowSubscriber.subscriberId], 'traceTracking')
        this.mapChart.addSource('trackingHexGrid', {
          type: 'geojson',
          data: this.trackingPolygonSourceData
        })
        this.mapChart.addLayer({
          id: 'trackingHexagon',
          type: 'fill',
          source: 'trackingHexGrid',
          layout: {},
          paint: {
            'fill-color': ['get', 'color'],
            'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.7, 0.4]
          }
        })
        // 轨迹线
        const mapLineSourceData = this.mapLineDataConverter()
        this.mapChart.addSource('trackingLineSource', {
          type: 'geojson',
          data: mapLineSourceData
        })
        this.mapChart.addLayer({
          id: 'trackingLine',
          type: 'line',
          source: 'trackingLineSource',
          paint: {
            'line-color': 'rgba(222, 52, 52, .8)',
            'line-width': 3
          }
        })
        this.moveToCenter(currentShowSubscriberRecords)
        // 最后所在地的图标
        const coordinate = h3ToGeo(currentShowSubscriberRecords[0].hexId)
        this.renderTrackingMarker([coordinate[1], coordinate[0]])
      }
    },
    renderMarker (data, type) {
      try {
        data.forEach(marker => {
          if (type === this.tooltipType.human && (marker.sessionRecordPoint || marker.sdPoint)) {
            if (marker.sessionRecordPoint) {
              const el = document.createElement('div')
              el.className = `map-marker map-marker--${type}`
              if (marker.subscriberId === this.highlightSubscriber.subscriberId) {
                el.classList.add('map-marker--highlight')
              }
              // 非关注的用户，默认隐藏图标，鼠标移到列表后才显示
              if (this.currentZoom && this.currentZoom < 6) {
                el.classList.add('map-marker--hidden')
              }
              if (!marker.isFollowed && this.onlyShowFollowed) {
                el.classList.add('map-marker--unfollowed')
              }
              el.innerHTML = humanLeakedSvg
              // 鼠标事件，控制tooltip显示和marker尺寸
              this.bindMarkerEvent(el, marker, type, true)
              const mapMarker = new maplibregl.Marker({ element: el })
                .setLngLat(marker.sessionRecordPoint.coordinate)
                .addTo(this.mapChart)
              mapMarker.subscriberId = marker.subscriberId
              mapMarker.isFollowed = marker.isFollowed
              mapMarker.active = marker.active
              this.humanMarkers.push(mapMarker)
            }
            if (marker.sdPoint) {
              const el = document.createElement('div')
              el.className = `map-marker map-marker--${type}`
              if (marker.subscriberId === this.highlightSubscriber.subscriberId) {
                el.classList.add('map-marker--highlight')
              }
              // 非关注的用户，默认隐藏图标，鼠标移到列表后才显示
              if (this.currentZoom && this.currentZoom < 6) {
                el.classList.add('map-marker--hidden')
              }
              if (!marker.isFollowed && this.onlyShowFollowed) {
                el.classList.add('map-marker--unfollowed')
              }
              el.innerHTML = humanSvg
              // 鼠标事件，控制tooltip显示和marker尺寸
              this.bindMarkerEvent(el, marker, type)
              const mapMarker = new maplibregl.Marker({ element: el })
                .setLngLat(marker.sdPoint.coordinate)
                .addTo(this.mapChart)
              mapMarker.subscriberId = marker.subscriberId
              mapMarker.isFollowed = marker.isFollowed
              mapMarker.active = marker.active
              this.humanMarkers.push(mapMarker)
            }
          } else if (type === this.tooltipType.baseStation) {
            const el = document.createElement('div')
            el.className = `map-marker map-marker--${type}`
            if (this.currentZoom && this.currentZoom < 6) {
              el.classList.add('map-marker--hidden')
            }
            el.innerHTML = baseStationSvg
            // 鼠标事件，控制tooltip显示和marker尺寸
            this.bindMarkerEvent(el, marker, type)
            const mapMarker = new maplibregl.Marker({ element: el })
              .setLngLat([marker.longitude, marker.latitude])
              .addTo(this.mapChart)
            this.baseStationMarkers.push(mapMarker)
          } else if (type === this.tooltipType.cell) {
            const el = document.createElement('div')
            el.className = `map-marker map-marker--${type}`
            if (this.currentZoom && this.currentZoom < 6) {
              el.classList.add('map-marker--hidden')
            }
            el.innerHTML = cellSvg
            // 鼠标事件，控制tooltip显示和marker尺寸
            this.bindMarkerEvent(el, marker, type)
            const mapMarker = new maplibregl.Marker({ element: el })
              .setLngLat([marker.longitude, marker.latitude])
              .addTo(this.mapChart)
            this.cellMarkers.push(mapMarker)
          }
        })
      } catch (e) {
        console.error(e)
      }
    },
    renderTrackingMarker (coordinates) {
      const el = document.createElement('div')
      el.className = 'map-tracking-marker'
      el.innerHTML = `<div class="tracking-marker__inner-circle">${humanSvg}</div>`
      this.trackingHumanMarker = new maplibregl.Marker({ element: el })
        .setLngLat(coordinates)
        .addTo(this.mapChart)
    },
    updateHumanMarker () {
    },
    updateBoundaryBox () {
      const boundaryBox = this.mapChart.getBounds()
      this.boundaryBox = {
        maxLongitude: boundaryBox.getEast(),
        maxLatitude: boundaryBox.getNorth(),
        minLongitude: boundaryBox.getWest(),
        minLatitude: boundaryBox.getSouth()
      }
      let needUpdateData = false
      if (!this.boundaryBoxExtreme) {
        this.boundaryBoxExtreme = generateRectanglePolygon(this.boundaryBox.minLongitude, this.boundaryBox.minLatitude, this.boundaryBox.maxLongitude, this.boundaryBox.maxLatitude)
        needUpdateData = true
      } else {
        const polygon = generateRectanglePolygon(this.boundaryBox.minLongitude, this.boundaryBox.minLatitude, this.boundaryBox.maxLongitude, this.boundaryBox.maxLatitude)
        const union = turf.union(turf.featureCollection([this.boundaryBoxExtreme, polygon]))
        // 如果合并后面积变大了，说明有新的区域，需要渲染
        if (turf.area(union) > turf.area(this.boundaryBoxExtreme)) {
          this.boundaryBoxExtreme = union
          needUpdateData = true
        }
      }
      return needUpdateData
    },
    // 先使用min=0的等宽分组法，若后续出现特大或特小的异常值导致等宽分组效果不理想，考虑用分位数分组法
    calculateValueRamp (data) {
      const max = _.maxBy(data, d => Number(d.number))
      const result = []
      if (max) {
        let step
        if (max.number <= 1000) {
          step = 20
        } else {
          step = 100
        }
        const maxLegend = Math.ceil((max.number) / step) * step
        for (let i = 1; i <= this.pieColorRamp.length; i++) {
          const item = {
            start: maxLegend * (i - 1) / this.pieColorRamp.length + 1,
            end: maxLegend * i / this.pieColorRamp.length,
            color: this.pieColorRamp[i - 1]
          }
          item.count = data.filter(d => d.number >= item.start && d.number <= item.end).length
          if (i === this.pieColorRamp.length) {
            item.name = `>${item.start - 1}`
          } else {
            item.name = `${item.start}~${item.end}`
          }
          result.push(item)
        }
      }
      return result
    },
    hexagonDataConverter (data, tab) {
      const featureCollection = { type: 'FeatureCollection' }
      if (tab === 'locationMap') {
        featureCollection.features = data.map(d => ({
          id: parseInt(d.hexId, 16),
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              h3ToGeoBoundary(d.hexId, true)
            ]
          },
          properties: {
            hexId: d.hexId,
            number: d.number,
            color: this.getHexagonFillColor(d.number)
          }
        }))
      } else if (tab === 'traceTracking') {
        // 对hexId去重，将重复的hexId的时间合并
        const hexagons = []
        data.forEach(d => {
          const find = hexagons.find(h => h.hexId === d.hexId)
          if (!find) {
            hexagons.push({ hexId: d.hexId, locations: [{ time: d.time, longitude: d.subscriberLongitude, latitude: d.subscriberLatitude, country: d.country, superAdministrativeArea: d.superAdministrativeArea, administrativeArea: d.administrativeArea }] })
          } else {
            if (find.locations.length < 6) {
              find.locations.push({ time: d.time, longitude: d.subscriberLongitude, latitude: d.subscriberLatitude })
            }
          }
        })
        featureCollection.features = hexagons.map((d, i) => ({
          id: i + 100000,
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              h3ToGeoBoundary(d.hexId, true)
            ]
          },
          properties: {
            hexId: d.hexId,
            number: d.number,
            locations: d.locations,
            color: [37, 55, 128]
          }
        }))
      }
      return featureCollection
    },
    getHexagonFillColor (number) {
      const ramp = this.pieValueRamp.filter((r, i) => {
        if (i < this.pieValueRamp.length - 1) {
          return Number(number) >= r.start && Number(number) <= r.end
        } else {
          return Number(number) >= r.start
        }
      })
      if (ramp.length > 0) {
        return ramp[0].color.split(',').map(n => Number(n))
      }
      return [229, 229, 229]
    },
    mapLineDataConverter () {
      const records = this.trackingSubscriberRecordMap[this.currentShowSubscriber.subscriberId]
      const feature = {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: records.map(d => {
            const cs = h3ToGeo(d.hexId)
            return [cs[1], cs[0]]
          })
        }
      }
      return {
        type: 'FeatureCollection',
        features: [feature]
      }
    },
    hoverTrigger (source, id, hover) {
      this.mapChart.setFeatureState({ source, id }, { hover })
    },
    bindHexagonEvents () {
      // 地图可视范围变化（move和zoom）的时候，获取新的地图边界，加载新数据
      this.mapChart.on('mouseenter', 'hexagon', this.hexagonMouseEnter)
      this.mapChart.on('mouseleave', 'hexagon', this.hexagonMouseLeave)
      this.mapChart.on('mousemove', 'hexagon', this.hexagonMouseMove)
      this.mapChart.on('click', 'hexagon', this.hexagonClick)
    },
    unbindHexagonEvents () {
      this.mapChart.off('mouseenter', 'hexagon', this.hexagonMouseEnter)
      this.mapChart.off('mouseleave', 'hexagon', this.hexagonMouseLeave)
      this.mapChart.off('mousemove', 'hexagon', this.hexagonMouseMove)
      this.mapChart.off('click', 'hexagon', this.hexagonClick)
    },
    bindTrackingHexagonEvents () {
      this.mapChart.on('mouseenter', 'trackingHexagon', this.trackingHexagonMouseEnter)
      this.mapChart.on('mouseleave', 'trackingHexagon', this.trackingHexagonMouseLeave)
      this.mapChart.on('mousemove', 'trackingHexagon', this.trackingHexagonMouseMove)
    },
    unbindTrackingHexagonEvents () {
      this.mapChart.off('mouseenter', 'trackingHexagon', this.trackingHexagonMouseEnter)
      this.mapChart.off('mouseleave', 'trackingHexagon', this.trackingHexagonMouseLeave)
      this.mapChart.off('mousemove', 'trackingHexagon', this.trackingHexagonMouseMove)
    },
    hexagonMouseEnter () {
      this.tooltip.mouseIsInPolygon = true
    },
    hexagonMouseLeave () {
      this.tooltip.showPolygonTooltip = false
      this.tooltip.mouseIsInPolygon = false
      // 去掉上一块的高亮
      this.hoverTrigger('hexGrid', this.currentPolygon.id, false)
    },
    hexagonMouseMove (e) {
      const { originalEvent, features } = e
      if (!this.tooltip.mouseInMarkerOrTooltip) {
        this.tooltip.showPolygonTooltip = true
        this.tooltip.type = this.tooltipType.hexagon
        if (this.tooltip.type === this.tooltipType.hexagon && this.currentPolygon.id && this.currentPolygon.id !== features[0].id) {
          // 去掉上一块的高亮
          this.hoverTrigger('hexGrid', this.currentPolygon.id, false)
        }
        this.currentPolygon = features[0].properties
        this.currentPolygon.id = features[0].id
        this.tooltip.x = originalEvent.clientX + 15
        this.tooltip.y = (originalEvent.clientY + 5 + this.tooltipDomHeight.hexagon) > this.mapDomHeight ? (this.mapDomHeight - this.tooltipDomHeight.hexagon) : (originalEvent.clientY + 5)

        // 鼠标滑过高亮
        this.hoverTrigger('hexGrid', this.currentPolygon.id, true)
      }
    },
    async hexagonVisualRangeChange (e) {
      this.currentZoom = this.mapChart.getZoom()
      console.info(`current zoom: ${this.currentZoom}`)

      if (this.activeTab === 'traceTracking') {
        if (this.currentZoom && this.currentZoom < 6) {
          this.hideBaseStation()
        } else {
          this.showBaseStation()
        }
      } else if (this.activeTab === 'locationMap') {
        if (this.currentZoom >= 9 && this.mapChart.getSource('hexGrid') && this.updateBoundaryBox()) {
          const oldSourceData = this.mapChart.getSource('hexGrid')._data
          const hexagonData = await this.queryHexagon()
          // 将查到的h3hexagon数据转为geojson
          const polygonSourceData = this.hexagonDataConverter(hexagonData, 'locationMap')
          // 对比新旧数据，同个hexId新数据number大于旧数据的，将旧数据覆盖；新hexId直接添加；
          const newSourceData = this.compareSourceData(oldSourceData, polygonSourceData)
          this.mapChart.getSource('hexGrid').setData(newSourceData)
        }
      }
    },
    compareSourceData (oldData, newData) {
      // 创建一个哈希表来存储oldData中每个feature的hexId和它的索引位置
      const oldDataMap = new Map()
      oldData.features.forEach((feature, index) => {
        oldDataMap.set(feature.properties.hexId, { feature, index })
      })

      newData.features.forEach(n => {
        const hexId = n.properties.hexId
        if (oldDataMap.has(hexId)) {
          // 如果在oldData中找到匹配的hexId
          const { feature: oldFeature } = oldDataMap.get(hexId)
          if (Number(n.properties.number) > Number(oldFeature.properties.number)) {
            // 更新number和color属性
            oldFeature.properties.number = n.properties.number
            oldFeature.properties.color = n.properties.color
          }
        } else {
          // 如果没有找到，添加新的feature到oldData
          oldData.features.push({ ...n })
        }
      })

      return oldData
    },
    trackingHexagonMouseEnter () {
      this.tooltip.mouseIsInPolygon = true
    },
    trackingHexagonMouseLeave () {
      this.tooltip.showPolygonTooltip = false
      this.tooltip.mouseIsInPolygon = false
      // 去掉上一块的高亮
      this.hoverTrigger('trackingHexGrid', this.currentPolygon.id, false)
    },
    trackingHexagonZoomEnd () {
      this.currentZoom = this.mapChart.getZoom()
      console.info(`current zoom: ${this.currentZoom}`)
      if (this.currentZoom && this.currentZoom < 6) {
        this.hideBaseStation()
      } else {
        this.showBaseStation()
      }
    },
    trackingHexagonMouseMove (e) {
      const { originalEvent, features } = e
      if (!this.tooltip.mouseInMarkerOrTooltip) {
        this.tooltip.showPolygonTooltip = true
        this.tooltip.type = this.tooltipType.hexagon
        if (this.tooltip.type === this.tooltipType.hexagon && this.currentPolygon.id && this.currentPolygon.id !== features[0].id) {
          // 去掉上一块的高亮
          this.hoverTrigger('trackingHexGrid', this.currentPolygon.id, false)
        }
        this.currentPolygon = features[0].properties
        this.currentPolygon.id = features[0].id
        this.currentPolygon.location = `${h3ToGeo(this.currentPolygon.hexId)[1]}, ${h3ToGeo(this.currentPolygon.hexId)[0]}`
        // this.tooltip.x = originalEvent.clientX + 15
        // this.tooltip.y = originalEvent.clientY + 5
        this.$nextTick(() => {
          const tooltipDom = document.getElementById('tooltip')
          const tooltipDomHeight = tooltipDom.offsetHeight
          this.tooltip.x = originalEvent.clientX + 15
          this.tooltip.y = originalEvent.clientY + 5
          this.tooltip.y = (originalEvent.clientY + 5 + tooltipDomHeight) > this.mapDomHeight ? (this.mapDomHeight - tooltipDomHeight) : (originalEvent.clientY + 5)
        })

        // 鼠标滑过高亮
        this.hoverTrigger('trackingHexGrid', this.currentPolygon.id, true)
      }
    },
    trackingSourceChange () {
      this.timeRefreshChange()
    },
    bindMarkerEvent (el, markerData, type, isSessionRecord) {
      el.addEventListener('mouseenter', e => {
        this.currentMarkerDom = el
        if (type === this.tooltipType.human) {
          this.currentSubscriber = markerData
          if (isSessionRecord) {
            this.currentSubscriber.isSessionRecord = true
          }
          const toHoverMarkers = this.humanMarkers.filter(m => m.subscriberId === markerData.subscriberId)
          toHoverMarkers.forEach(m => {
            m.getElement().classList.add('map-marker--hover')
          })
          if (!this.tooltip.mouseInMarkerOrTooltip) {
            this.tooltip.x = e.clientX + 15 - e.offsetX
            this.tooltip.y = (e.clientY + 15 - e.offsetY + this.tooltipDomHeight.human) > this.mapDomHeight ? (this.mapDomHeight - this.tooltipDomHeight.human) : (e.clientY + 15 - e.offsetY)
          }
        } else if (type === this.tooltipType.baseStation) {
          this.currentBaseStation = markerData
          if (!this.tooltip.mouseInMarkerOrTooltip) {
            this.tooltip.x = e.clientX + 15 - e.offsetX
            this.tooltip.y = (e.clientY + 15 - e.offsetY + this.tooltipDomHeight.baseStation) > this.mapDomHeight ? (this.mapDomHeight - this.tooltipDomHeight.baseStation) : (e.clientY + 15 - e.offsetY)
          }
        } else if (type === this.tooltipType.cell) {
          this.currentCell = markerData
          if (!this.tooltip.mouseInMarkerOrTooltip) {
            this.tooltip.x = e.clientX + 15 - e.offsetX
            this.tooltip.y = (e.clientY + 15 - e.offsetY + this.tooltipDomHeight.baseStation) > this.mapDomHeight ? (this.mapDomHeight - this.tooltipDomHeight.baseStation) : (e.clientY + 15 - e.offsetY)
          }
        }

        this.tooltip.mouseInMarkerOrTooltip = true
        this.tooltip.type = type
        this.tooltip.showMarkerTooltip = true
        el.classList.add('map-marker--hover')
      })
      el.addEventListener('mouseleave', event => {
        const tooltipDom = document.getElementById('tooltip')
        if (!tooltipDom.contains(event.relatedTarget)) {
          el.classList.remove('map-marker--hover')
          this.tooltip.mouseInMarkerOrTooltip = false
          this.tooltip.showMarkerTooltip = false
          if (type === this.tooltipType.human) {
            const toCancelHoverMarkers = this.humanMarkers.filter(m => m.subscriberId === markerData.subscriberId)
            toCancelHoverMarkers.forEach(m => {
              m.getElement().classList.remove('map-marker--hover')
            })
          }
        }
      })
      if (type === this.tooltipType.human) {
        el.addEventListener('click', e => {
          // 先去掉所有高亮marker
          this.humanMarkers.forEach(m => {
            m.getElement().classList.remove('map-marker--highlight')
          })
          // 再判断点击前是否高亮。是则去掉highlightSubscriber的引用，否则查找两种dataSource的marker并高亮
          if (this.highlightSubscriber.subscriberId !== markerData.subscriberId) {
            this.rightExpanded = true
            this.highlightSubscriber = markerData
            const toHighlightMarkers = this.humanMarkers.filter(m => m.subscriberId === markerData.subscriberId)
            toHighlightMarkers.forEach(m => {
              m.getElement().classList.add('map-marker--highlight')
            })
            // 将滚动条跳转到对应位置
            document.querySelector(`#locationMap-subscriberId-${markerData.subscriberId}`).scrollIntoView({ behavior: 'smooth', block: 'center' })
          } else {
            this.highlightSubscriber = {}
          }
        })
      }
      if (type === this.tooltipType.baseStation) {
        // 点击基站后展开各个方向的cell
        el.addEventListener('click', e => {
          // 首先将基站图标高亮
          this.baseStationMarkers.forEach(m => {
            m.getElement().classList.remove('map-marker--highlight')
          })
          this.cleanCellsAndLines()
          if (this.highlightBaseStation.nodebId !== markerData.nodebId || this.highlightBaseStation.operator !== markerData.operator) {
            el.classList.add('map-marker--highlight')
            this.highlightBaseStation = markerData

            // 然后根据cells的数据，生成各个方位角的cell
            // 先将zoom调到12，然后以基站为中心点，计算指定角度指定距离的点的坐标，并绘制点以及连线
            this.mapChart.flyTo({
              center: [markerData.longitude, markerData.latitude],
              zoom: 12.5,
              speed: 0.6
            })
            const points = []
            // 先判断cell的方位角有没重合，重合的话在老cell的基础上往右偏移一些
            markerData.cells.forEach(cell => {
              const sameAzimuthCells = points.filter(p => p.azimuth === cell.azimuth)
              const sourceCoordinate = []
              let coordinate
              if (sameAzimuthCells.length > 0) {
                const lastSameAzimuthCell = sameAzimuthCells[sameAzimuthCells.length - 1]
                coordinate = turf.destination([lastSameAzimuthCell.longitude, lastSameAzimuthCell.latitude], 0.15, 90).geometry.coordinates
                sourceCoordinate.push(lastSameAzimuthCell.longitude)
                sourceCoordinate.push(lastSameAzimuthCell.latitude)
              } else {
                coordinate = turf.destination([markerData.longitude, markerData.latitude], 0.8, cell.azimuth).geometry.coordinates
                sourceCoordinate.push(markerData.longitude)
                sourceCoordinate.push(markerData.latitude)
              }
              points.push({
                ...cell,
                longitude: coordinate[0],
                latitude: coordinate[1],
                sourceCoordinate
              })
            })
            this.drawCellsAndLines(points)
          } else {
            this.highlightBaseStation = {}
          }
        })
      }
    },
    tooltipMouseEnter () {
      this.tooltip.mouseInMarkerOrTooltip = true
    },
    tooltipMouseLeave (event) {
      if (this.currentMarkerDom && !this.currentMarkerDom.contains(event.relatedTarget)) {
        this.tooltip.mouseInMarkerOrTooltip = false
        this.tooltip.showMarkerTooltip = false
        this.currentMarkerDom.classList.remove('map-marker--hover')
      }
    },
    reload (startTime, endTime, dateRangeValue) {
      this.curPageNum = 1
      this.timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), dateRangeValue: dateRangeValue }
      const { query } = this.$route
      this.$store.commit('setTimeRangeArray', [this.timeFilter.startTime, this.timeFilter.endTime])
      this.$store.commit('setTimeRangeFlag', dateRangeValue.value)

      const newUrl = urlParamsHandler(window.location.href, query, {
        startTime: this.timeFilter.startTime,
        endTime: this.timeFilter.endTime,
        range: dateRangeValue.value
      })
      overwriteUrl(newUrl)
    },
    timelineMouseEnter (subscriber, record) {
      this.trackingPolygonSourceData.features.forEach(f => {
        this.hoverTrigger('trackingHexGrid', f.id, false)
      })
      if (this.currentShowSubscriber.subscriberId === subscriber.subscriberId) {
        const find = this.trackingPolygonSourceData.features.find(d => d.properties.hexId === record.hexId)
        if (find) {
          this.hoverTrigger('trackingHexGrid', find.id, true)
        }
      }
    },
    timelineMouseLeave (subscriber, record) {
      if (this.currentShowSubscriber.subscriberId === subscriber.subscriberId) {
        const find = this.trackingPolygonSourceData.features.find(d => d.properties.hexId === record.hexId)
        if (find) {
          this.hoverTrigger('trackingHexGrid', find.id, false)
        }
      }
    },
    timelineClick (subscriber, record) {
      // 点击timeline时，将地图中心移动到该记录的位置，并高亮左侧小红圈
      this.mapChart.panTo([record.subscriberLongitude, record.subscriberLatitude], { duration: 500 })
      this.highlightTrackingTimeline = record
    },
    // subscriber列表点击后将地图上的人图标保持特殊高亮，并移动地图中心至图标点
    subscriberListClick (subscriber) {
      // 先删除当前所有高亮的
      this.humanMarkers.forEach(m => {
        m.getElement().classList.remove('map-marker--highlight')
      })
      if (this.highlightSubscriber.subscriberId === subscriber.subscriberId) {
        this.highlightSubscriber = {}
      } else {
        this.highlightSubscriber = subscriber
        const targets = this.humanMarkers.filter(m => subscriber.subscriberId === m.subscriberId)
        if (targets.length > 0) {
          targets.forEach(target => {
            target.getElement().classList.add('map-marker--highlight')
          })
          this.mapChart.panTo(targets[0].getLngLat(), { duration: 500 })
        }
      }
    },
    subscriberListMouseEnter (subscriber) {
      subscriber.showJumpToEntity = true
      const targets = this.humanMarkers.filter(m => subscriber.subscriberId === m.subscriberId)
      if (targets.length > 0) {
        targets.forEach(target => {
          target.addClassName && target.addClassName('map-marker--hover')
        })
      }
    },
    subscriberListMouseLeave (subscriber) {
      subscriber.showJumpToEntity = false
      const targets = this.humanMarkers.filter(m => subscriber.subscriberId === m.subscriberId)
      if (targets.length > 0) {
        targets.forEach(target => {
          target.removeClassName && target.removeClassName('map-marker--hover')
        })
      }
    },
    async scrollList (e) {
      if (!this.onlyShowFollowed) {
        const dom = document.getElementById('locationMap-subscriber-scroll')
        if (dom.scrollTop + dom.clientHeight >= dom.scrollHeight && !this.loading.subscriberLoading) {
          this.curPageNum++
          await this.initSubscriberList()
        }
      }
    },
    timeRefreshChange () {
      this.curPageNum = 1
      // 不是自选时间
      if (this.$refs.dateTimeRange) {
        if (!this.$refs.dateTimeRange.isCustom) {
          const value = this.timeFilter.dateRangeValue
          this.$refs.dateTimeRange.quickChange(value)
        } else {
          this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
        }
      } else {
        this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
      }
    },
    clickTrackBlock (i) {
      const length = this.trackingSubscriberRecordMap[this.trackingSubscribers[i].subscriberId].length
      if (length > 1) {
        this.trackingSubscribers[i].show = !this.trackingSubscribers[i].show
        if (this.trackingSubscribers[i].show) {
          this.trackingSubscribers[i].showLine = true
          this.trackingSubscribers[i].scrollStartIndex = 1
          this.trackingSubscribers[i].scrollEndIndex = 6
          this.trackingSubscribers[i].startOffset = 0
          this.trackingSubscribers[i].listHeight = 0
          // 高度置为0，是为了切换时间后再打开时间线，让滚动条置顶
          const timer = setTimeout(() => {
            this.trackingSubscribers[i].listHeight = this.trackingSubscriberRecordMap[this.trackingSubscribers[i].subscriberId].length * this.scrollInfo.itemSize
            clearTimeout(timer)
          }, 100)
        } else {
          const timer = setTimeout(() => {
            this.trackingSubscribers[i].showLine = false
            clearTimeout(timer)
          }, 200)
        }
      }
    },
    changeCurrentShowSubscriber (subscriber) {
      if (subscriber.subscriberId !== this.currentShowSubscriber.subscriberId) {
        this.currentShowSubscriber = subscriber
      }
    },
    hideBaseStation () {
      this.baseStationMarkers.forEach(bs => {
        bs.addClassName && bs.addClassName('map-marker--hidden')
      })
    },
    showBaseStation () {
      this.baseStationMarkers.forEach(bs => {
        bs.removeClassName && bs.removeClassName('map-marker--hidden')
      })
    },
    hideFollowed () {
      this.humanMarkers.forEach(human => {
        human.addClassName && human.addClassName('map-marker--hidden')
      })
    },
    showFollowed () {
      this.humanMarkers.forEach(human => {
        human.removeClassName && human.removeClassName('map-marker--hidden')
      })
    },
    hideHexagon () {
      this.mapChart.getLayer('hexagon') && this.mapChart.setLayoutProperty('hexagon', 'visibility', 'none')
      this.mapChart.getLayer('highlightHexagon') && this.mapChart.setLayoutProperty('highlightHexagon', 'visibility', 'none')
    },
    showHexagon () {
      this.mapChart.getLayer('hexagon') && this.mapChart.setLayoutProperty('hexagon', 'visibility', 'visible')
      this.mapChart.getLayer('highlightHexagon') && this.mapChart.setLayoutProperty('highlightHexagon', 'visibility', 'visible')
    },
    // 关注列表的添加、删除追踪
    addOrRemoveTrackingSubscriber (subscriber) {
      const find = this.trackingSubscribers.find(s => s.subscriberId === subscriber.subscriberId)
      if (find) {
        const index = this.trackingSubscribers.findIndex(s => s.subscriberId === subscriber.subscriberId)
        this.trackingSubscribers.splice(index, 1)
      } else {
        this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false, scrollStartIndex: 1, scrollEndIndex: 6, startOffset: 0, listHeight: 0 })
      }
      this.opacity = 0
      setInterval(() => {
        this.opacity += 0.05
        if (this.opacity >= 1) {
          this.opacity = 1
        }
      }, 16)
    },
    // 追踪页删除追踪
    removeTrackingSubscriber (subscriber) {
      const find = this.trackingSubscribers.find(s => s.subscriberId === subscriber.subscriberId)
      if (find) {
        const index = this.trackingSubscribers.findIndex(s => s.subscriberId === subscriber.subscriberId)
        this.trackingSubscribers.splice(index, 1)
        if (subscriber.subscriberId === this.currentShowSubscriber.subscriberId) {
          // 如果删除的是当前正在地图上展示的，那么切换为展示第一个；如果删除后追踪列表清空了，则置为空
          if (this.trackingSubscribers.length === 0) {
            this.currentShowSubscriber = null
          } else {
            this.currentShowSubscriber = this.trackingSubscribers[0]
          }
        }
      }
    },
    // 关注列表追踪图标class
    symbolClass (subscriber) {
      const find = this.trackingSubscribers.find(s => s.subscriberId === subscriber.subscriberId)
      return find ? 'cn-icon-a-' : 'cn-icon-a-1'
    },
    // 地图上人图标鼠标悬浮框中点击追踪事件
    trackSubscriber (subscriber) {
      const find = this.trackingSubscribers.find(s => s.subscriberId === subscriber.subscriberId)
      if (!find) {
        this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false, scrollStartIndex: 1, scrollEndIndex: 6, startOffset: 0, listHeight: 0 })
      }
      this.currentShowSubscriber = subscriber
      this.activeTab = 'traceTracking'
      this.tooltip.showMarkerTooltip = false
    },
    // 地图上点击多边形
    hexagonClick (e) {
      // 点击时已经高亮的话，取消过滤条件
      if (this.tooltip.type === this.tooltipType.hexagon) {
        if (this.searchList[2].value === this.currentPolygon.hexId) {
          this.searchList[2].value = ''
        } else {
          this.searchList[2].value = this.currentPolygon.hexId
          this.searchList[2].active = 1
          this.rightExpanded = true
        }
      }
    },
    addHighlightHexagon () {
      // 先在地图上找是否存在色块，存在则创建高亮色块
      const sourceData = this.mapChart.getSource('hexGrid')._data
      const find = sourceData.features.find(d => d.properties.hexId === this.searchList[2].value)
      if (find) {
        const featureCollection = { type: 'FeatureCollection' }
        featureCollection.features = [{
          id: 9920447175, // 随便写个数
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              h3ToGeoBoundary(this.searchList[2].value, true)
            ]
          }
        }]
        this.mapChart.addSource('highlightHexGrid', {
          type: 'geojson',
          data: featureCollection
        })
        this.mapChart.addLayer({
          id: 'highlightHexagon',
          type: 'line',
          source: 'highlightHexGrid',
          layout: {
            visibility: this.currentZoom >= 9 ? 'visible' : 'none'
          },
          paint: {
            'line-color': 'rgb(255,255,255)',
            'line-width': 3
          }
        })
      }
    },
    removeHighlightHexagon () {
      this.mapChart.getLayer('highlightHexagon') && this.mapChart.removeLayer('highlightHexagon')
      this.mapChart.getSource('highlightHexGrid') && this.mapChart.removeSource('highlightHexGrid')
    },
    async initSubscriberList () {
      const params = {
        startTime: this.timeFilter.startTime,
        endTime: this.timeFilter.endTime,
        pageNo: this.curPageNum,
        pageSize: 20,
        params: '',
        isFollowed: this.onlyShowFollowed ? 1 : 0
      }
      const paramArray = []
      if (this.getSearchItem('HEX ID').value) {
        const levelField = this.mapLevelField.find(item => item.level === this.mapLevel)
        paramArray.push(levelField ? levelField.field + "='" + this.getSearchItem('HEX ID').value + "'" : '')
      }
      this.searchList.forEach((s, i) => {
        if (s.value && s.label !== 'HEX ID' && s.label !== this.$t('overall.source') && s.active === 1) {
          paramArray.push(`${s.name} like '%${s.value}%'`)
        } else if (s.value && s.label === this.$t('overall.source')) {
          paramArray.push(`data_source='${s.value}'`)
        }
      })
      if (paramArray.length > 0) {
        params.params = paramArray.join(' and ')
      }
      try {
        this.loading.subscriberLoading = true
        // 根据顶部的时间条件查列表，再根据底部时间轴的时间时间来查列表里的subscriber是否在线
        // 加载新数据、时间轴变化时，重新查在线状态
        await axios.get(api.location.totalCount, { params }).then(async response => {
          if (response.status === 200) {
            this.subscribersTotalCount = response.data.data[0].count
          }
        })
        await axios.get(api.location.list, { params }).then(async response => {
          if (response.status === 200) {
            if (response.data.data.length === 0 && this.curPageNum > 1) {
              this.loading.timeBarLoading = false
            } else if (response.data.data.length === 0 && this.curPageNum === 1) {
              this.loading.timeBarLoading = false
              this.subscribersList = []
            } else {
              await this.setSubscriberActiveStatus(response.data.data)
              if (params.pageNo === 1) {
                this.subscribersList = response.data.data
              } else {
                response.data.data.forEach(d => {
                  this.subscribersList.push(d)
                })
              }
              this.renderMarker(response.data.data, this.tooltipType.human)
            }
          }
        })
        // 异步查tag，避免阻塞
        setTimeout(() => {
          this.subscribersList.forEach(s => {
            if (!s.tags) {
              s.tags = []
              axios.get(`${api.entity.tags}/subscriber`, { params: { resource: s.subscriberId } }).then(response => {
                if (response.status === 200) {
                  if (response.data.data && response.data.data.tags) {
                    s.tags = response.data.data.tags.map(tag => {
                      return { value: tag.name, color: intentColor[tag.intent] || entityDefaultColor }
                    })
                  }
                }
              })
            }
          })
        }, 200)
      } catch (e) {
        this.$message.error(this.errorMsgHandler(e))
        console.error(e)
      } finally {
        this.loading.subscriberLoading = false
      }
    },
    async setSubscriberActiveStatus (subscriberList) {
      this.loading.timeBarLoading = true
      const subscriberIds = subscriberList.map(d => d.subscriberId)
      const timelineParams = {
        startTime: this.minuteTimeFilter.startTime,
        endTime: this.minuteTimeFilter.endTime,
        level: this.mapLevel,
        subscriberIds: subscriberIds.map(id => `'${id}'`).join(',')
      }
      if (this.getSearchItem(this.$t('overall.source')).value) {
        timelineParams.params = `data_source='${this.getSearchItem(this.$t('overall.source')).value}'`
      }
      await axios.get(api.location.tracking, { params: timelineParams }).then(async response => {
        subscriberList.forEach(item => {
          const find = response.data.data.result.find(d => {
            if (d.subscriberId === item.subscriberId) {
              const hasHexIdArr = d.trackRecords.filter(t => t.hexId)
              if (hasHexIdArr.length > 0) {
                // 将session record和sd的坐标点区分开
                const sessionRecordPoint = hasHexIdArr.find(d => d.dataSource === 'Session Record')
                const sdPoint = hasHexIdArr.find(d => d.dataSource === 'SD')
                if (sessionRecordPoint) {
                  item.sessionRecordPoint = {
                    coordinate: [sessionRecordPoint.subscriberLongitude, sessionRecordPoint.subscriberLatitude],
                    hexId: sessionRecordPoint.hexId
                  }
                }
                if (sdPoint) {
                  item.sdPoint = {
                    coordinate: [sdPoint.subscriberLongitude, sdPoint.subscriberLatitude],
                    hexId: sdPoint.hexId
                  }
                }
                return true
              } else {
                item.sessionRecordPoint = null
                item.sdPoint = null
              }
            }
            return false
          })
          item.active = find ? 1 : 0
        })
      }).finally(() => {
        this.loading.timeBarLoading = false
      })
    },
    // 针对我的关注列表的单条记录的关注和取消关注
    async handleFollow (item) {
      const subscriber = this.subscribersList.find(subscriber => subscriber.subscriberId === item.subscriberId)
      if (subscriber) {
        if (item.isFollowed === 1) {
          /* 刷新右侧列表 */
          subscriber.isFollowed = 1
          // 刷新地图上的人
          const find = this.humanMarkers.find(m => m.subscriberId === subscriber.subscriberId)
          if (find) {
            find.removeClassName && find.removeClassName('map-marker--unfollowed')
          }
          // 变更地图上图标的class
          if (this.currentZoom && this.currentZoom < 6) {
            this.hideBaseStation()
            this.hideFollowed()
          } else {
            this.showBaseStation()
            this.showFollowed()
          }
        } else {
          subscriber.isFollowed = 0
          // 刷新地图上的人
          const find = this.humanMarkers.find(m => m.subscriberId === subscriber.subscriberId)
          if (find) {
            find.addClassName && find.addClassName('map-marker--unfollowed')
          }
          // 变更地图上图标的class
          if (this.currentZoom && this.currentZoom < 6) {
            this.hideBaseStation()
            this.hideFollowed()
          } else {
            this.showBaseStation()
            this.showFollowed()
          }
        }
      }
    },
    // 针对我的关注列表的批量取消关注操作
    async handleCancelFollowBatch (items) {
      this.closeRightBox()
      items.forEach(item => {
        this.handleFollow(item)
      })
    },
    cancelFollowSubscribers (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.cancelFollow.success') })
          /* 刷新右侧列表 */
          item.isFollowed = 0
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(e => {
        this.$message.error(this.errorMsgHandler(e))
      })
    },
    followSubscribers (item) {
      if (item.isFollowed === 1) {
        axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
          if (res.status === 200) {
            this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
            /* 刷新右侧列表 */
            item.isFollowed = 0
            // 变更地图上图标的class
            const find = this.humanMarkers.find(m => m.subscriberId === item.subscriberId)
            if (find) {
              find.addClassName && find.addClassName('map-marker--unfollowed')
            }
            if (this.currentZoom && this.currentZoom < 6) {
              this.hideBaseStation()
              this.hideFollowed()
            } else {
              this.showBaseStation()
              this.showFollowed()
            }
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(e => {
          this.$message.error(this.errorMsgHandler(e))
        })
      } else {
        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
            // 变更地图上图标的class
            const find = this.humanMarkers.find(m => m.subscriberId === item.subscriberId)
            if (find) {
              find.removeClassName && find.removeClassName('map-marker--unfollowed')
            }
            if (this.currentZoom && this.currentZoom < 6) {
              this.hideBaseStation()
              this.hideFollowed()
            } else {
              this.showBaseStation()
              this.showFollowed()
            }
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(e => {
          this.$message.error(this.errorMsgHandler(e))
        })
      }
    },
    async showFollowedSubscribers () {
      this.curPageNum = 1
      this.subscribersList = []
      this.humanMarkers.forEach(marker => {
        marker.remove && marker.remove()
      })
      this.humanMarkers = []
      await this.initSubscriberList()
    },
    async searchSubscribers () {
      this.curPageNum = 1
      this.subscribersList = []
      // 根据输入字符串，查找用户信息
      await this.initSubscriberList()
    },
    mapTimeLineChange (timeFilter) {
      this.minuteTimeFilter = {
        startTime: getSecond(timeFilter.startTime),
        endTime: getSecond(timeFilter.endTime)
      }
    },
    async minuteTimeFilterChange () {
      this.humanMarkers.forEach(marker => {
        marker.remove && marker.remove()
      })
      this.humanMarkers = []
      await this.setSubscriberActiveStatus(this.subscribersList)
      this.renderMarker(this.subscribersList, this.tooltipType.human)
    },
    onResize () {
      this.$nextTick(() => {
        this.mapDomHeight = document.getElementById('analysisMap').offsetHeight + 150
      })
    },
    onScroll (e) {
      const find = this.trackingSubscribers.find(d => d.subscriberId === e.target.id)
      // 当前滚动位置
      const scrollTop = e.target.scrollTop
      // 列表开始索引
      const startIndex = Math.floor(scrollTop / this.scrollInfo.itemSize) || 1
      // 列表结束索引
      const endIndex = Math.ceil((scrollTop + this.scrollInfo.containerHeight) / this.scrollInfo.itemSize)
      find.scrollStartIndex = startIndex
      find.scrollEndIndex = endIndex
      // 列表距离顶部距离
      find.startOffset = scrollTop - (scrollTop % this.scrollInfo.itemSize)
    },
    getSearchItem (label) {
      return this.searchList.find(l => l.label === label)
    },
    cleanCellsAndLines () {
      this.cellMarkers.forEach(marker => {
        marker.remove && marker.remove()
      })
      this.cellMarkers = []
      this.mapChart.getLayer('baseStationToCellLines') && this.mapChart.removeLayer('baseStationToCellLines')
      this.mapChart.getSource('baseStationToCellLines') && this.mapChart.removeSource('baseStationToCellLines')
    },
    drawCellsAndLines (targets) {
      // 画cell
      this.renderMarker(targets, this.tooltipType.cell)
      // 画线
      const points = targets.map(target => ([target.sourceCoordinate, [target.longitude, target.latitude]]))
      const lines = turf.multiLineString(points)
      this.mapChart.addSource('baseStationToCellLines', {
        type: 'geojson',
        data: lines
      })
      this.mapChart.addLayer({
        id: 'baseStationToCellLines',
        type: 'line',
        source: 'baseStationToCellLines',
        layout: {
          'line-join': 'round',
          'line-cap': 'round'
        },
        paint: {
          'line-color': '#586A7F',
          'line-width': 2,
          'line-dasharray': [2, 2]
        }
      })
    }
  },
  watch: {
    searchList: {
      deep: true,
      handler (n) {
        // 强制更新dom，解决按钮移动了但是弹框未移动的问题
        this.$refs.searchItemList.$forceUpdate()
      }
    },
    'searchList.0.active': {
      deep: true,
      handler (n, o) {
        if (n === 0) {
          if (this.searchList[0].value) {
            this.searchList[0].value = ''
            this.debounceSearch()
          }
        }
      }
    },
    'searchList.1.active': {
      deep: true,
      handler (n, o) {
        if (n === 0) {
          if (this.searchList[1].value) {
            this.searchList[1].value = ''
            this.debounceSearch()
          }
        }
      }
    },
    'searchList.2.active': {
      deep: true,
      handler (n, o) {
        if (n === 0 && this.searchList[2].value) {
          this.searchList[2].value = ''
        }
      }
    },
    'searchList.3.active': {
      deep: true,
      handler (n, o) {
        if (n === 0 && this.searchList[3].value) {
          this.searchList[3].value = ''
        }
      }
    },
    'searchList.2.value': {
      deep: true,
      async handler (n, o) {
        this.removeHighlightHexagon()
        // 如果值不为空，寻找对应色块并高亮
        if (n) {
          this.addHighlightHexagon()
        }
        this.debounceSearch()
      }
    },
    'searchList.3.value': {
      deep: true,
      async handler (n, o) {
        if (this.activeTab === 'locationMap') {
          // 由于调整了source，需要重新调整地图上marker的图标
          this.updateHumanMarker()
          this.debounceSearch()
        }
      }
    },
    async activeTab (n) {
      this.initFlag = true
      this.$store.state.headerMenuByTab = n
      if (n === 'traceTracking') {
        // 切换到轨迹追踪tab时，先移除地图上已有的图层和事件绑定、人型图标。基站予以保留
        this.unbindHexagonEvents()
        this.mapChart.getLayer('hexagon') && this.mapChart.removeLayer('hexagon')
        this.mapChart.getSource('hexGrid') && this.mapChart.removeSource('hexGrid')
        this.removeHighlightHexagon()
        this.searchList[2].value = ''
        this.humanMarkers.forEach(marker => {
          marker.remove && marker.remove()
        })
        this.humanMarkers = []
        const newUrl = urlParamsHandler(`${window.location.protocol}//${window.location.host}/#/location/tracking`, {}, this.$route.query)
        overwriteUrl(newUrl)
        this.timeRefreshChange()
      } else if (n === 'locationMap') {
        this.unbindTrackingHexagonEvents()
        this.mapChart.getLayer('trackingHexagon') && this.mapChart.removeLayer('trackingHexagon')
        this.mapChart.getLayer('trackingLine') && this.mapChart.removeLayer('trackingLine')
        this.mapChart.getSource('trackingHexGrid') && this.mapChart.removeSource('trackingHexGrid')
        this.mapChart.getSource('trackingLineSource') && this.mapChart.removeSource('trackingLineSource')
        this.trackingHumanMarker.remove && this.trackingHumanMarker.remove()
        this.trackingHumanMarker = {}

        const newUrl = urlParamsHandler(`${window.location.protocol}//${window.location.host}/#/location/map`, {}, this.$route.query)
        overwriteUrl(newUrl)
        this.timeRefreshChange()
      }
    },
    // 时间轴改变时，重新查询人marker
    async minuteTimeFilter (n) {
      // 避免初始化时请求，造成人的图标会闪一下
      if (this.initFlag) {
        this.initFlag = false
        return
      }
      this.debounceMinuteChange?.()
    },
    // 切换追踪的用户
    currentShowSubscriber (n) {
      this.mapChart.getLayer('trackingHexagon') && this.mapChart.removeLayer('trackingHexagon')
      this.mapChart.getLayer('trackingLine') && this.mapChart.removeLayer('trackingLine')
      this.mapChart.getSource('trackingHexGrid') && this.mapChart.removeSource('trackingHexGrid')
      this.mapChart.getSource('trackingLineSource') && this.mapChart.removeSource('trackingLineSource')
      this.trackingHumanMarker.remove && this.trackingHumanMarker.remove()
      this.trackingHumanMarker = {}
      if (n) {
        this.renderTrackingHexagon()
      }
    },
    async timeFilter (n) {
      this.boundaryBoxExtreme = null
      if (this.activeTab === 'locationMap') {
        this.initFlag = true
        this.unbindHexagonEvents()
        this.mapChart.getLayer('hexagon') && this.mapChart.removeLayer('hexagon')
        this.mapChart.getSource('hexGrid') && this.mapChart.removeSource('hexGrid')
        this.removeHighlightHexagon()
        this.humanMarkers.forEach(marker => {
          marker.remove && marker.remove()
        })
        this.humanMarkers = []
        await this.initLocationMapTab()
        if (this.searchList[2].value) {
          this.addHighlightHexagon()
        }
      } else if (this.activeTab === 'traceTracking') {
        this.unbindTrackingHexagonEvents()
        this.mapChart.getLayer('trackingHexagon') && this.mapChart.removeLayer('trackingHexagon')
        this.mapChart.getLayer('trackingLine') && this.mapChart.removeLayer('trackingLine')
        this.mapChart.getSource('trackingHexGrid') && this.mapChart.removeSource('trackingHexGrid')
        this.mapChart.getSource('trackingLineSource') && this.mapChart.removeSource('trackingLineSource')
        this.trackingHumanMarker.remove && this.trackingHumanMarker.remove()
        this.trackingHumanMarker = {}
        await this.initTraceTrackingTab()
      }
    },
    trackingSubscribers: {
      deep: true,
      handler (n) {
        sessionStorage.setItem(storageKey.trackingSubscribers, JSON.stringify(n))
      }
    },
    // 控制map loading
    'loading.hexagonLoading': {
      handler (n) {
        this.loading.mapLoading = n || this.loading.timeBarLoading || this.loading.baseStationLoading
      }
    },
    'loading.timeBarLoading': {
      handler (n) {
        this.loading.mapLoading = n || this.loading.hexagonLoading || this.loading.baseStationLoading
      }
    },
    'loading.baseStationLoading': {
      handler (n) {
        this.loading.mapLoading = n || this.loading.timeBarLoading || this.loading.hexagonLoading
      }
    },
    currentZoom (n, o) {
      // zoom 小于11隐藏 marker
      if (o && n < 6) {
        this.hideBaseStation()
        this.hideFollowed()
      } else {
        this.showBaseStation()
        this.showFollowed()
      }
      // zoom 小于9隐藏色块
      if (o && n < 9) {
        this.hideHexagon()
      } else {
        this.showHexagon()
      }
    },
    leftExpanded (n, o) {
      if (n) {
        setTimeout(() => {
          this.pieChart.resize && this.pieChart.resize()
          this.lineChart.resize && this.lineChart.resize()
        }, 300)
      }
    }
  },
  computed: {
    computeListHeight () {
      const step = 34
      const baseHeight = 68
      const showCount = this.searchList.filter(l => l.active === 1).length
      return { height: `calc(100% - ${baseHeight + showCount * step}px)` }
    },
    tooltipHeaderColor () {
      if (this.tooltip.type === this.tooltipType.hexagon) {
        const color = this.currentPolygon.color.split(',')
        color[0] = color[0].split('[')[1]
        color[2] = color[2].split(']')[0]
        return `rgba(${color.join(',')},.7)`
      } else if (this.tooltip.type === this.tooltipType.human) {
        return 'var(--el-color-business)'
      } else if (this.tooltip.type === this.tooltipType.baseStation) {
        return '#233447'
      } else if (this.tooltip.type === this.tooltipType.cell) {
        return '#274E85'
      }
      return ''
    },
    locationHandler () {
      return function (item) {
        const result = []
        if (item) {
          if (item.country) {
            result.push(item.country)
          }
          if (item.superAdministrativeArea) {
            result.push(item.superAdministrativeArea)
          }
          if (item.administrativeArea) {
            result.push(item.administrativeArea)
          }
        }
        return result.length > 0 ? result.join(', ') : '-'
      }
    }
  },
  async mounted () {
    /* const result = []
    const startLat = 39.5
    const startLng = 115.8
    const endLat = 40.3
    const endLng = 116.8
    const latStep = 0.0028
    const lngStep = 0.00435
    for (let i = startLat; i < endLat; i += latStep) {
      for (let j = startLng; j < endLng; j += lngStep) {
        const r = Math.random()
        let number = Math.round(r * r * r * 1000)
        if (number > 1000) {
          number = 1000
        }
        if (number < 1) {
          number = 1
        }
        result.push({ hexId: geoToH3(i, j, 8), number })
      }
    }
    const uniqueData = removeDuplicateHexIds(result)
    console.info(JSON.stringify(uniqueData))
    function removeDuplicateHexIds (array) {
      // 创建一个Map来存储唯一的hexId和对应的对象
      const uniqueObjects = new Map()

      // 遍历数组，如果Map中没有这个hexId，则将其加入Map
      array.forEach(item => {
        if (!uniqueObjects.has(item.hexId)) {
          uniqueObjects.set(item.hexId, item)
        }
      })

      // 将Map中的值（即对象）转换回数组
      return Array.from(uniqueObjects.values())
    } */
    await this.initMap()
    this.debounceMinuteChange = _.debounce(this.minuteTimeFilterChange, 500)
    this.debounceOnResize = _.debounce(this.onResize, 500)
    this.debounceVisualChange = _.debounce(this.hexagonVisualRangeChange, 500)
    this.debounceSearch = _.debounce(this.searchSubscribers, 500)
    this.onResize()
  },
  setup () {
    const { currentRoute } = useRouter()
    const currentPath = currentRoute.value.path
    const activeTab = ref('')
    const dropDownValue = ref('')
    switch (currentPath) {
      case ('/location/map'): {
        activeTab.value = 'locationMap'
        break
      }
      case ('/location/tracking'): {
        activeTab.value = 'traceTracking'
        break
      }
    }
    const { query } = useRoute()
    // 获取url携带的range、startTime、endTime、id(subscriberId)
    const rangeParam = query.range
    const startTimeParam = query.startTime
    const endTimeParam = query.endTime
    const idParam = query.subscriberId

    // 优先级：url > config.js > 默认值。
    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.dashboard || 60)
    const timeFilter = ref({ dateRangeValue })
    if (!startTimeParam || !endTimeParam || dateRangeValue > -1) {
      const { startTime, endTime } = getNowTime(dateRangeValue)
      timeFilter.value.startTime = getSecond(startTime)
      timeFilter.value.endTime = getSecond(endTime)
      // 将参数写入url
      const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
      overwriteUrl(newUrl)
    } else {
      timeFilter.value.startTime = parseInt(startTimeParam)
      timeFilter.value.endTime = parseInt(endTimeParam)
    }
    const minuteTimeFilter = ref({})
    const tooltip = ref({
      type: ''
    })
    // const pieColorRamp = ['186,224,255', '105,177,255', '22,119,255', '0,62,179', '0,29,102']
    // const pieColorRamp = ['156,174,29', '241,198,0', '89,202,242', '63,133,186', '37,55,128']
    // const pieColorRamp = ['196,214,59', '190,230,255', '135,206,250', '63,133,186', '37,55,128']
    // const pieColorRamp = ['196,214,59', '135,206,250', '63,133,186', '45,65,135', '34,7,90']
    const pieColorRamp = ['135,206,250', '63,133,186', '45,65,135', '34,7,90']
    const pieValueRamp = ref([])
    const subscribersList = ref([])
    const subscribersTotalCount = ref(0)
    const searchList = ref([
      {
        label: 'ID',
        name: 'subscriber_id',
        value: '',
        type: 'input',
        active: 1
      },
      {
        label: 'MSISDN',
        name: 'phone_number',
        value: '',
        type: 'input',
        active: 0
      },
      {
        label: 'HEX ID',
        name: 'second_location',
        value: '',
        type: 'input',
        active: 0
      },
      {
        label: i18n.global.t('overall.source'),
        name: 'data_source',
        value: '',
        type: 'select',
        options: [
          {
            label: i18n.global.t('overall.all'),
            value: ''
          },
          {
            label: i18n.global.t('location.baseStation'),
            value: 'SD'
          },
          {
            label: i18n.global.t('overall.leaked'),
            value: 'Session Record'
          }
        ],
        active: 0
      }
    ])
    const boundaryBox = ref({}) // minLongitude、maxLongitude、minLatitude、maxLatitude
    const boundaryBoxExtreme = ref(null) // minLongitude、maxLongitude、minLatitude、maxLatitude
    const mapChart = shallowRef(null)
    const currentMarkerDom = shallowRef(null)
    const humanMarkers = shallowRef([])
    const baseStationMarkers = shallowRef([])
    const cellMarkers = shallowRef([])
    const trackingHumanMarker = shallowRef({})
    const pieChart = shallowRef(null)
    const pieOption = ref({})
    const lineChart = shallowRef(null)
    const lineOption = ref({})
    const currentBaseStation = ref({})
    const currentSubscriber = ref({})
    const currentPolygon = ref({})
    const currentCell = ref({})
    const highlightTrackingTimeline = ref({})
    const highlightSubscriber = ref({})
    const highlightBaseStation = ref({})

    // 从localStorage中获取数据
    const trackingSubscribers = ref([])
    sessionStorage.getItem(storageKey.trackingSubscribers) && (trackingSubscribers.value = JSON.parse(sessionStorage.getItem(storageKey.trackingSubscribers)).map(item => ({ ...item, show: false, showLine: false, scrollStartIndex: 1, scrollEndIndex: 6, startOffset: 0, listHeight: 0 })))
    /* const test = ['gary6411', 'test6431', 'test6430', 'test6422']
    test.forEach(id => {
      trackingSubscribers.value.push({ subscriberId: id, show: false, showLine: false })
    }) */

    const currentShowSubscriber = ref(null)
    const loading = ref({
      mapLoading: true, // mapLoading控制location地图的loading，它状态同时受hexagonLoading、timeBarLoading、baseStationLoading影响
      hexagonLoading: true, // 六边形加载状态
      timeBarLoading: true, // 时间轴和地图上的人型图标的加载状态
      baseStationLoading: true, // 基站加载状态

      subscriberLoading: true, // 控制右侧关注用户列表加载状态
      pieLoading: true, // 控制饼图加载状态
      lineLoading: true, // 控制折线图加载状态
      searchLoading: false, // 搜索框加载状态
      trackingMapLoading: true // 控制追踪地图加载状态
    })

    const mapDomHeight = ref(0)
    const tooltipDomHeight = {
      hexagon: 153,
      baseStation: 153,
      human: 167
    }

    const mapConfig = localStorage.getItem(storageKey.mapConfig) ? JSON.parse(localStorage.getItem(storageKey.mapConfig)) : defaultMapConfig
    return {
      activeTab,
      dropDownValue,
      timeFilter,
      idFromUrl: ref(idParam), // 从url获取的subscriberId
      minuteTimeFilter, // 底下时间轴的时间
      searchList, // 搜索框下拉列表
      leftExpanded: ref(false), // 左右侧栏是否展开
      rightExpanded: ref(true),
      tooltip, // 控制鼠标悬浮框
      pieColorRamp, // 六边形颜色坡度
      pieValueRamp, // 饼图数值坡度，动态获取
      subscribersList, // Location用户列表
      subscribersTotalCount, // Location用户总数
      boundaryBox, // 查六边形数据的经纬度范围，minLongitude、maxLongitude、minLatitude、maxLatitude
      boundaryBoxExtreme, // boundaryBox的历史极值，用来判断当前boundaryBox下是否需要查数据
      mapChart, // 地图对象
      currentMarkerDom, // 记录当前鼠标悬停的marker的dom
      humanMarkers, // 储存人marker的引用
      baseStationMarkers, // 储存基站marker的引用
      cellMarkers, // 储存cell marker的引用
      trackingHumanMarker, // 追踪页的人marker
      pieChart, // 饼图对象
      pieOption,
      lineChart, // 折线图对象
      lineOption,
      mapPolygonSourceData: shallowRef({}), // locationMap 的 maplibre sourceData
      trackingPolygonSourceData: shallowRef({}), // traceTracking 的 maplibre sourceData
      currentBaseStation, // 鼠标当前悬浮的基站
      currentSubscriber, // 鼠标当前悬浮的Subscriber
      currentPolygon, // 鼠标当前悬浮的六边形
      currentCell, // 鼠标当前悬浮的cell
      highlightTrackingTimeline, // tracking页高亮的时间线
      highlightSubscriber, // locationMap页保持高亮的subscriber
      highlightBaseStation, // 高亮的基站
      trackingSubscribers, // 存放当前追踪的Subscriber列表
      currentShowSubscriber, // 当前在地图上展示轨迹的Subscriber
      trackingSubscriberRecordMap: [], // record数据量大时，vue监听性能开销太大，所以单独用非监听的数组来维护subscriberId与record的关系
      loading, // 控制组件内各处loading图标
      maxZoom: mapConfig.maxZoom, // 地图最小缩放比例
      minZoom: mapConfig.minZoom, // 地图最大缩放比例
      currentZoom: ref(mapConfig.defaultZoom),
      mapLevel: mapConfig.mapLevel, // 地图精度  1、2、3
      unitTypes,
      defaultZoom: mapConfig.defaultZoom, // 地图默认缩放比例
      center: mapConfig.center, // 地图默认中心点。北京：[116.38, 39.9] 纽约：[-73.94539, 40.841843]
      debounceMinuteChange: shallowRef(null),
      debounceOnResize: shallowRef(null),
      debounceVisualChange: shallowRef(null),
      debounceSearch: shallowRef(null),
      mapLevelField,
      mapDomHeight, // 地图dom的高度，用来计算悬浮框的位置
      tooltipDomHeight // 计算悬浮框位置时默认的悬浮框高度
    }
  },
  unmounted () {
    if (this.mapChart && this.mapChart.remove) {
      this.mapChart && this.mapChart.remove()
    }
    if (this.pieChart && this.pieChart.dispose) {
      this.pieChart && this.pieChart.dispose()
    }
    if (this.lineChart && this.lineChart.dispose) {
      this.lineChart && this.lineChart.dispose()
    }
  }
}
</script>