fix: 替换:key="index"，修复潜在缓存问题

2024-08-22 18:11:45 +08:00
parent d0c56545d4
commit 9d066abfa9
42 changed files with 81 additions and 81 deletions
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -7,7 +7,7 @@
          class="map-chart__legend"
          :class="`${currentLegendIndex === index ? 'map-chart__legend--active' : ''}`"
          v-for="(legend, index) in legends"
-          :key="index"
+          :key="item.name"
          @click="changeLegend(index)"
      >
        <div
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -9,7 +9,7 @@
               v-show="item.show"
               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
               v-for="(item, index) in tabs"
-               :key="index"
+               :key="item.name"
               @mouseenter="mouseenter(item)"
               @mouseleave="mouseleave(item)"
               @click="activeChange(item, index,true)">
--- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
@@ -10,7 +10,7 @@
              <div class="line-value-tabs"
                   :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                   v-if="item.show"
-                   :key="index"
+                   :key="item.name"
                   @mouseenter="mouseenter(item)"
                   @mouseleave="mouseleave(item)"
                   @click="activeChange(item, index,true)"
--- a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
@@ -38,7 +38,7 @@
                    <div class="scroll-list" :style="`transform: translateY(${trackingSubscriber.startOffset}px)`">
                      <div class="scroll__item"
                           v-for="(record, index) in trackingSubscriber.trackRecords.slice(trackingSubscriber.scrollStartIndex, trackingSubscriber.scrollEndIndex)"
-                           :key="index"
+                           :key="item.time"
                           @mouseenter="timelineMouseEnter(trackingSubscriber, record)"
                           @mouseleave="timelineMouseLeave(trackingSubscriber, record)"
                      >
--- a/src/views/charts2/charts/entityDetail/lines/App.vue
+++ b/src/views/charts2/charts/entityDetail/lines/App.vue
@@ -9,7 +9,7 @@
            <div class="line-value-tabs"
                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                 v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                 @mouseenter="mouseenter(item)"
                 @mouseleave="mouseleave(item)"
                 @click="activeChange(item, index,true)"
--- a/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
+++ b/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
@@ -9,7 +9,7 @@
            <div class="line-value-tabs"
                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                 v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                 @mouseenter="mouseenter(item)"
                 @mouseleave="mouseleave(item)"
                 @click="activeChange(item, index,true)"
--- a/src/views/charts2/charts/entityDetail/tabs/AccountInformation.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/AccountInformation.vue
@@ -10,7 +10,7 @@
          <span class="type-title-word">{{ $t('entities.tab.email') }}</span>({{ mailList.length }})
        </div>
        <div class="type-content">
-          <div v-for="(mail, index) in mailList.slice(0,showMailListInfo.num)" :key="index" class="data-item">
+          <div v-for="mail in mailList.slice(0,showMailListInfo.num)" :key="mail" class="data-item">
            {{ mail }}
          </div>
        </div>
@@ -27,7 +27,7 @@
          <span class="type-title-word">{{ $t('entities.tab.wetchat') }}</span>({{ wetchatList.length }})
        </div>
        <div class="type-content">
-          <div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="index" class="data-item">
+          <div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="wetchat" class="data-item">
            {{ wetchat }}
          </div>
        </div>
--- a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
@@ -5,7 +5,7 @@
  <div v-if="!isNoData && !showError" class="entity-detail-event-block" style="height: 100%;width: 100%;position: relative;">
    <div class="behavior-pattern" >
      <div class="behavior-pattern-legend" >
-          <div class="behavior-pattern-legend__item" v-for="(data, index) in tableData" :key="index">
+          <div class="behavior-pattern-legend__item" v-for="(data, index) in tableData" :key="data.name">
            <div class="legend-icon" :style="`background:${chartColorForBehaviorPattern[index%10]};`"></div>
            <div class="legend-name">{{data.name}}</div>
            <div class="legend-value" >{{ valueToRangeValue(data.value, unitTypes.number).join('')}}</div>
--- a/src/views/charts2/charts/entityDetail/tabs/DeviceInformation.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DeviceInformation.vue
@@ -10,7 +10,7 @@
          <span class="type-title-word">{{ $t('entities.tab.device') }}</span>({{ deviceList.length }})
        </div>
        <div class="type-content">
-          <div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="index" class="data-item">
+          <div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="device" class="data-item">
            {{ device }}
          </div>
        </div>
--- a/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
@@ -12,7 +12,7 @@
        </div>
      </div>

-      <div v-for="(item, index) in infoList" :key="index" class="margin-t-20">
+      <div v-for="item in infoList" :key="item.name" class="margin-t-20">
        <div class="digital-certificate-body">
          <div class="digital-certificate-body-tags">
            <div :class="item.flag === '0' ? 'entity-tag entity-tag--level-two-negative-no-background' : 'entity-tag entity-tag--level-two-positive-no-background'">{{ this.$t(getTrusted(item.flag)) }}</div>
@@ -20,7 +20,7 @@

          <div class="digital-certificate-body-content">
            <div class="certificate-list-list">
-              <div v-for="(item1, index1) in item.data" :key="index1" class="certificate-list-item">
+              <div v-for="item1 in item.data" :key="item1.label" class="certificate-list-item">
                <div class="certificate-list-item__label">{{ item1.label }}</div>
                <div v-if="item1.type" :class="'entity-tag entity-tag--small entity-tag--level-one-' + item1.type">{{ item1.value }}</div>
                <div v-else class="certificate-list-item__value">
--- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
@@ -16,7 +16,7 @@
                v-show="item.show"
                :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                v-for="(item, index) in tabs"
-                :key="index"
+                :key="item.name"
                @mouseenter="mouseenter(item)"
                @mouseleave="mouseleave(item)"
                @click="activeChange(item, index, true)"
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -75,7 +75,7 @@
              <div class="body__apps" :class="{'body__apps-no-grid': providerOptions.length === 0}">
                <loading :loading="loadingBody"></loading>
                <chart-no-data v-if="providerOptions.length === 0 && !loadingBody" test-id="noData"></chart-no-data>
-                <div class="body__app" v-else :class="{'provide-show': app.provideShow}" v-for="(app, index) in providerOptions" :key="index"  @click="appCheckedChange(app, 0)" :test-id="`provide${index}`">
+                <div class="body__app" v-else :class="{'provide-show': app.provideShow}" v-for="(app, index) in providerOptions" :key="app.value"  @click="appCheckedChange(app, 0)" :test-id="`provide${index}`">
                  <div class="body__app-content">
                    <div class="body__app-left">
                      <span><i class="cn-icon" :class="app.icon" :test-id="`provide-icon${index}`"></i></span>
@@ -95,7 +95,7 @@
              <div class="body__apps" :class="{'body__apps-no-grid': appOptions.length === 0}">
                <loading :loading="loadingBody"></loading>
                <chart-no-data v-if="appOptions.length === 0 && !loadingBody"></chart-no-data>
-                <div class="body__app" v-else :class="{'app-show': app.appShow}" v-for="(app, index) in appOptions" :key="index" @click="appCheckedChange(app, 1)" :test-id="`app${index}`">
+                <div class="body__app" v-else :class="{'app-show': app.appShow}" v-for="(app, index) in appOptions" :key="app.name" @click="appCheckedChange(app, 1)" :test-id="`app${index}`">
                  <div class="body__app-content">
                    <div class="body__app-left">
                      <span><i class="cn-icon" :class="app.icon" :test-id="`app-icon${index}`"></i></span>
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -9,7 +9,7 @@
            <div class="line-value-tabs"
                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                 v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                 @mouseenter="mouseenter(item)"
                 @mouseleave="mouseleave(item)"
                 @click="activeChange(item, index,true)"
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -4,13 +4,13 @@

    <div class="npm-app-left" v-if="!showError">
      <div class="npm-app-letter" :class="{'npm-app-letter-no-data': isNoData}">
-        <div v-for="(letter, index) in colorPatchData" :key="index">
+        <div v-for="letter in colorPatchData" :key="letter.letter">
          {{letter.letter}}
        </div>
      </div>
      <chart-no-data v-if="isNoData"></chart-no-data>
      <div class="npm-app-body" v-else>
-        <div class="npm-app-body-patch" v-for="(data, index) in tableData" :key="index">
+        <div class="npm-app-body-patch" v-for="(data, index) in tableData" :key="data.icon">
          <div class="npm-app-body-icon"><span><i :class="data.icon" :test-id="`iconContent${index}`"></i></span></div>
          <div class="npm-app-body-color" v-for="index2 in 6" :key="index2" :class="{'score-color': data.score >= index2}"></div>
        </div>
@@ -24,7 +24,7 @@
        height="100%"
        empty-text=" "
        v-if="!showError">
-      <template v-for="(item, index) in customTableTitles" :key="index">
+      <template v-for="item in customTableTitles" :key="item.label">
        <el-table-column class="data-column">
          <template #header>
            <span class="data-column__span" style="margin-left: -2px;">{{$t(item.label)}}</span>
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -8,7 +8,7 @@
        :row-class-name="rowClassName"
        empty-text=""
    >
-      <template v-for="(item, index) in customTableTitles" :key="index">
+      <template v-for="(item, index) in customTableTitles" :key="item.label">
        <el-table-column class="data-column" :min-width="columnWidth(index)">
          <template #header>
            <span class="data-column__span">{{ $t(item.label) }}</span>
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -11,7 +11,7 @@
        <div class="npm-event-pie-legends">
          <div class="npm-event-pie-legend">
            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
+            <template v-for="(legend, index) in chartData" :key="legend.name">
              <div class="npm-event-pie-legend-type">
                <div :style="`width: 9px;height: 9px;background-color: ${legend.color};margin-right: 5px;`"></div>
                <div class="npm-event-pie-legend-type-severity" :test-id="`testNode${index}`">{{legend.name}}</div>
@@ -20,7 +20,7 @@
          </div>
          <div class="npm-event-pie-legend">
            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
+            <template v-for="(legend, index) in chartData" :key="legend.name">
              <div class="npm-event-pie-legend-total" :test-id="`total${index}`">{{legend.value}}</div>
            </template>
          </div>
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -9,7 +9,7 @@
        </div>
        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !isNoData">
          <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData"
-               :key="index" @click="highlightEvent(item)">
+               :key="item.legend" @click="highlightEvent(item)">
            <div class="npm-line-header-icon" :class="'icon' + index"></div>
            <div class="npm-line-header-value">{{ item.legend }}</div>
          </div>
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -12,7 +12,7 @@
        :class="{'npm-recent-table-ten': tableData.length === 10}"
        empty-text=""
    >
-      <template v-for="(item, index) in customTableTitles" :key="index">
+      <template v-for="item in customTableTitles" :key="item.label">
        <el-table-column class="data-column">
          <template #header>
            <span class="data-column__span">{{$t(item.label)}}</span>
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -2,7 +2,7 @@
  <div class="detection-filter-case">
    <div class="filter-case__header">{{$t('detections.filters')}}</div>
    <div class="no-data" v-if="isNoData">{{ $t('npm.noData') }}</div>
-    <template v-for="(filter, index) in filterData" :key="index">
+    <template v-for="(filter, index) in filterData" :key="filter.title">
      <div class="detection-filter" v-show="filter.data.length > 0 && filter.show">
        <div class="filter__header">{{filter.title}}</div>

--- a/src/views/detections/DetectionList.vue
+++ b/src/views/detections/DetectionList.vue
@@ -12,11 +12,11 @@
              :detection="data"
              :page-type="pageType"
              :timeFilter="timeFilter"
-              :key="index"
+              :key="data.eventId"
              :pageObj="pageObj"
              :eventFlag="eventFlag"
              :ref="`detectionRow${index}`"
-              :index="index"
+              :index="data.eventId"
              @switchCollapse="switchCollapse"
              :q="q"
          ></detection-row>
@@ -29,7 +29,7 @@
              :page-type="pageType"
              :timeFilter="timeFilter"
              :eventFlag="eventFlag"
-              :key="index"
+              :key="data.eventId"
              :pageObj="pageObj"
              :ref="`detectionRow${index}`"
              :index="index"
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -12,7 +12,7 @@
      <div class="cn-detection__row">
        <div class="cn-detection__header">
          <span class="detection-event-severity-block margin-l-16">{{ detection.eventName || '-' }}</span>
-          <div v-for="(item, index) in myDetection.keyList" :key="index">
+          <div v-for="(item, index) in myDetection.keyList" :key="item.key">
            <span class="detection-event-name">{{item.key}}</span>
            <span class="detection-event-key">({{ item.type }})</span>
            <span v-if="index < myDetection.keyList.length - 1" class="detection-event-line"></span>
--- a/src/views/detections/DetectionRowEvents.vue
+++ b/src/views/detections/DetectionRowEvents.vue
@@ -15,7 +15,7 @@
          <div class="body__basic-info">
            <div class="basic-info new__basic-info">
              <div class="basic-info__item">
-                <span v-for="(item, index) in myDetection.keyList" :key="index">
+                <span v-for="(item, index) in myDetection.keyList" :key="item.key">
                  <span class="item__key">{{item.key}}</span>
                  <span class="item__key__type">({{ item.type }})</span>
                  <span v-if="index < myDetection.keyList.length - 1" class="detection-event-line"></span>
--- a/src/views/detections/overview/EventsTimeline.vue
+++ b/src/views/detections/overview/EventsTimeline.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="events-timeline">
    <div class="timeline__circle">
-      <div v-for="(item, index) in myTimeData" :key="index">
+      <div v-for="(item, index) in myTimeData" :key="item.statTime">
        <el-tooltip :content="changeTimestampToTime(item.statTime)" placement="top" effect="light">
          <div
              :class="index===activeCircle ? 'circle__item-active' : 'circle__item'"
@@ -12,7 +12,7 @@
    </div>
    <div class="timeline__line margin-l-30"></div>
    <div class="timeline-container margin-l-30" id="timeline-container">
-      <div v-for="(item, index) in timeLine" :key="index" :style="{width: item.isYear ? '5px' : 'auto'}">
+      <div v-for="item in timeLine" :key="item.time" :style="{width: item.isYear ? '5px' : 'auto'}">
        <div v-if="item.showFlag" :class="handleTransformClass(item.isYear)">{{ item.time }}</div>
      </div>
    </div>
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -3,7 +3,7 @@
    <div class="filter-case__header">{{ $t('entities.filter1') }}</div>

    <div v-if="filterDataLength>0">
-      <div class="entity-filter" v-for="(item, index) in myFilterData" :key="index">
+      <div class="entity-filter" v-for="(item, index) in myFilterData" :key="item.title">
        <div v-if="item.data.length>0">
          <div class="filter__header">
            <i :class="item.icon"></i>
--- a/src/views/entityExplorer/entityGraph/GraphEntityList.vue
+++ b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
@@ -33,7 +33,7 @@
        </div>

        <div class="graph-list-content">
-          <div v-for="(item, index) in showList" :key="index">
+          <div v-for="(item, index) in showList" :key="item.vertex">
            <div class="graph-list-item-ip"><span @click="expandDetail">{{ item.vertex }}</span></div>
            <template v-if="$_.get(node, 'data.entityType', '') === 'ip'">
              <div class="graph-list-item-block">
--- a/src/views/entityExplorer/entityList/EntityList.vue
+++ b/src/views/entityExplorer/entityList/EntityList.vue
@@ -13,7 +13,7 @@
              :listMode="listMode"
              :keywordList="keywordList"
              :timeFilter="timeFilter"
-              :key="index"
+              :key="data.entityValue"
              :ref="`entityRow${index}`"
              :index="index"
              @switchCollapse="switchCollapse"
@@ -30,7 +30,7 @@
              :index="index"
              :listMode="listMode"
              :timeFilter="timeFilter"
-              :key="index"
+              :key="data.entityValue"
          ></entity-card>
        </div>
      </template>
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -28,8 +28,8 @@
            </el-popover>
          </span>
          <span class="entity-detail entity-row-tag" :style="{'margin-top' : entityData.isRelated ? '4px':'1px'}">
-            <span v-for="(item, index) in levelTwoTags"
-                  :key="index"
+            <span v-for="item in levelTwoTags"
+                  :key="item.value"
                  class="entity-tag entity-tag--small margin-r-10 margin-b-10"
                  :class="`entity-tag--level-two-${item.type}`"
                  :style="getTagColor(item.color)">
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -91,7 +91,7 @@
            <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
          </div>

-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataOne" :key="item.value">
            {{item.value}}
          </div>
          <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -99,7 +99,7 @@
          <div v-if="relationshipShowOne">
            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
            <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="item in relationshipDataOne" :key="item.value">
                <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
              </div>
            </div>
@@ -115,7 +115,7 @@
            <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
          </div>

-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataTwo" :key="item.value">
            {{item.value}}
          </div>
          <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
@@ -123,7 +123,7 @@
          <div v-if="relationshipShowTwo">
            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
            <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
-              <div v-for="(item, index) in relationshipDataTwo" :key="index">
+              <div v-for="item in relationshipDataTwo" :key="item.value">
                <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
              </div>
            </div>
@@ -144,7 +144,7 @@
        <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
        <div class="row__content">{{entityData.performanceNum}}</div>
      </div>
-      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="performance in entityData.performanceList" :key="performance.startTime">
        <div class="row__label row__label--width130">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
        <div class="row__content row__content--width90">
          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
@@ -171,7 +171,7 @@
        <div class="row__content">{{entityData.securityNum}}</div>
      </div>

-      <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="security in entityData.securityList" :key="security.startTime">
        <div class="row__label row__label--width130">{{security.startTime ? dateFormatByAppearance(Number(security.startTime)) : '-'}}</div>
        <div class="row__content row__content--width90">
          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(security)}`">{{security.eventSeverity}}</div>
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -97,7 +97,7 @@
            <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
          </div>

-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataOne" :key="item.value">
            {{item.value}}
          </div>
          <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -105,7 +105,7 @@
          <div v-if="relationshipShowOne">
            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
            <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="item in relationshipDataOne" :key="item.value">
                <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
              </div>
            </div>
@@ -119,7 +119,7 @@
          <div v-if="loadingRelationshipTwo" class="relationship-two__loading">
            <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
          </div>
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataTwo" :key="item.value">
            {{item.value}}
          </div>
          <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
@@ -127,7 +127,7 @@
          <div v-if="relationshipShowTwo">
            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
            <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
-              <div v-for="(item, index) in relationshipDataTwo" :key="index">
+              <div v-for="item in relationshipDataTwo" :key="item.value">
                <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
              </div>
            </div>
@@ -148,7 +148,7 @@
        <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
        <div class="row__content">{{entityData.performanceNum}}</div>
      </div>
-      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="performance in entityData.performanceList" :key="performance.startTime">
        <div class="row__label row__label--width130">{{performance.startTime ? dateFormatByAppearance(Number(performance.startTime)) : '-'}}</div>
        <div class="row__content row__content--width90">
          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -132,7 +132,7 @@
            <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
          </div>

-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataOne" :key="item.value">
            {{item.value}}
          </div>
          <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -140,7 +140,7 @@
          <div v-if="relationshipShowOne">
            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
            <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="item in relationshipDataOne" :key="item.value">
                <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
              </div>
            </div>
@@ -155,7 +155,7 @@
            <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
          </div>

-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataTwo" :key="item.value">
            {{item.value}}
          </div>
          <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
@@ -163,7 +163,7 @@
          <div v-if="relationshipShowTwo">
            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
            <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
-              <div v-for="(item, index) in relationshipDataTwo" :key="index">
+              <div v-for="(item, index) in relationshipDataTwo" :key="item.value">
                <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
              </div>
            </div>
@@ -184,7 +184,7 @@
        <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
        <div class="row__content">{{entityData.performanceNum}}</div>
      </div>
-      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="performance.startTime">
        <div class="row__label row__label--width130">{{performance.startTime ? dateFormatByAppearance(Number(performance.startTime)) : '-'}}</div>
        <div class="row__content row__content--width90">
          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
@@ -211,7 +211,7 @@
        <div class="row__content">{{entityData.securityNum}}</div>
      </div>

-      <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="security.startTime">
        <div class="row__label row__label--width130">{{security.startTime ? dateFormatByAppearance(Number(security.startTime)) : '-'}}</div>
        <div class="row__content row__content--width90">
          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(security)}`">{{security.eventSeverity}}</div>
--- a/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue
@@ -65,7 +65,7 @@
            <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
          </div>

-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="item.value">
            {{item.value}}
          </div>
          <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -73,7 +73,7 @@
          <div v-if="relationshipShowOne">
            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
            <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="item.value">
                <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
              </div>
            </div>