gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1717 feat: tracking 增加列表点击事件，列表增加信息泄露标识

Browse Source
This commit is contained in:
chenjinsong
2024-11-04 14:30:12 +08:00
parent 49fe92da26
commit aa7c51137b
5 changed files with 137 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
View File

@@ -316,7 +316,48 @@ $color-highlight: #CC4444;
height: 58px; height: 58px;
display: flex; display: flex;
.item-circle { .item-icons {
display: flex;
flex-direction: column;
.icon-circle {
position: relative;
padding-left: 18px;
i {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
color: #FA901C;
}
.circle-circle {
width: 10px;
height: 10px;
margin-left: 2px;
margin-top: 2px;
border-radius: 50%;
background-color: $color-circle;
&.circle-circle__highlight {
margin-left: 0;
margin-top: 0;
width: 14px;
height: 14px;
}
}
}
.item-line {
border-left: 2px $color-inactive dotted;
height: 34px;
margin-left: 24px;
margin-top: 6px;
transition: all 0.2s;
}
}
/*.item-circle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -335,7 +376,7 @@ $color-highlight: #CC4444;
margin-top: 6px; margin-top: 6px;
transition: all var(--el-transition-duration-fast); transition: all var(--el-transition-duration-fast);
} }
} }*/
.item-content { .item-content {
display: flex; display: flex;

50
src/assets/css/components/views/location/location.scss
View File

@@ -20,6 +20,7 @@ $color-highlight: #CC4444;
.subscriber-tags { .subscriber-tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 18px;
.subscriber-tag { .subscriber-tag {
display: flex; display: flex;
@@ -647,10 +648,11 @@ $color-highlight: #CC4444;
} }
.subscriber__body { .subscriber__body {
padding: 10px 18px; padding: 10px 18px 10px 0;
.body__item { .body__item {
display: flex; display: flex;
padding-left: 18px;
.item__label { .item__label {
padding-right: 10px; padding-right: 10px;
@@ -672,9 +674,9 @@ $color-highlight: #CC4444;
.item-record__header { .item-record__header {
font-family: Helvetica; font-family: Helvetica;
padding-left: 18px;
font-size: 16px; font-size: 16px;
color: $color-text-primary; color: $color-text-primary;
font-weight: 400;
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
} }
@@ -719,11 +721,24 @@ $color-highlight: #CC4444;
display: flex; display: flex;
padding-bottom: 10px; padding-bottom: 10px;
.timeline__info--circle { .info-icons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.info__circle { .icon-circle {
position: relative;
padding-left: 18px;
i {
position: absolute;
top: 4px;
left: -3px;
font-size: 14px;
color: #FA901C;
}
.circle-circle {
width: 17px; width: 17px;
height: 17px; height: 17px;
margin-left: -2px; margin-left: -2px;
@@ -732,11 +747,12 @@ $color-highlight: #CC4444;
outline: rgba(222, 52, 52, 0.30) solid 4px; outline: rgba(222, 52, 52, 0.30) solid 4px;
margin-top: 2px; margin-top: 2px;
} }
}
.info__line { .info-line {
border-left: 2px $color-inactive dotted; border-left: 2px $color-inactive dotted;
height: 34px; height: 34px;
margin-left: 6px; margin-left: 24px;
transition: all 0.2s; transition: all 0.2s;
} }
} }
@@ -771,6 +787,7 @@ $color-highlight: #CC4444;
.item-record__btn, .item-record__btn-disabled { .item-record__btn, .item-record__btn-disabled {
padding-right: 6px; padding-right: 6px;
margin-left: 18px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
} }
@@ -790,28 +807,43 @@ $color-highlight: #CC4444;
height: 58px; height: 58px;
display: flex; display: flex;
.item-circle { .item-icons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.icon-circle {
position: relative;
padding-left: 18px;
i {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
color: #FA901C;
}
.circle-circle { .circle-circle {
width: 10px; width: 10px;
height: 10px; height: 10px;
margin-left: 2px; margin-left: 2px;
margin-top: 2px;
border-radius: 50%; border-radius: 50%;
background-color: $color-circle; background-color: $color-circle;
&.circle-circle__highlight { &.circle-circle__highlight {
margin-left: 0; margin-left: 0;
margin-top: 0;
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
} }
}
.circle-line { .item-line {
border-left: 2px $color-inactive dotted; border-left: 2px $color-inactive dotted;
height: 34px; height: 34px;
margin-left: 6px; margin-left: 24px;
margin-top: 6px; margin-top: 6px;
transition: all 0.2s; transition: all 0.2s;
} }

20
src/views/charts2/charts/entityDetail/EntityDetailMap.vue
View File

File diff suppressed because one or more lines are too long

3
src/views/entityExplorer/entityList/detailOverview/SubscriberMap.vue
View File

File diff suppressed because one or more lines are too long

25
src/views/location/Index.vue
View File

@@ -347,9 +347,12 @@
</div> </div>
<div class="item-record__timeline"> <div class="item-record__timeline">
<div class="timeline__info"> <div class="timeline__info">
<div class="timeline__info--circle"> <div class="info-icons">
<div class="info__circle"></div> <div class="icon-circle">
<div class="info__line" v-show="subscriber.showLine"></div> <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>
<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 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> <div>
@@ -374,9 +377,12 @@
@click="timelineClick(subscriber, record)" @click="timelineClick(subscriber, record)"
@mouseenter="timelineMouseEnter(subscriber, record)" @mouseenter="timelineMouseEnter(subscriber, record)"
@mouseleave="timelineMouseLeave(subscriber, record)"> @mouseleave="timelineMouseLeave(subscriber, record)">
<div class="item-circle"> <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 class="circle-circle" :class="record.dataSource === highlightTrackingTimeline.dataSource && record.time === highlightTrackingTimeline.time ? 'circle-circle__highlight' : ''"></div>
<div class="circle-line"></div> </div>
<div class="item-line"></div>
</div> </div>
<div class="item-content"> <div class="item-content">
<div style="width: 217px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden"> <div style="width: 217px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
@@ -413,7 +419,7 @@
<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> <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"> <template v-else-if="tooltip.type === tooltipType.human">
<div class="icon__box"> <div class="icon__box">
<svg v-if="currentSubscriber.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-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> <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>
</template> </template>
@@ -1105,7 +1111,7 @@ export default {
} }
el.innerHTML = humanLeakedSvg el.innerHTML = humanLeakedSvg
// 鼠标事件，控制tooltip显示和marker尺寸 // 鼠标事件，控制tooltip显示和marker尺寸
this.bindMarkerEvent(el, marker, type) this.bindMarkerEvent(el, marker, type, true)
const mapMarker = new maplibregl.Marker({ element: el }) const mapMarker = new maplibregl.Marker({ element: el })
.setLngLat(marker.sessionRecordPoint.coordinate) .setLngLat(marker.sessionRecordPoint.coordinate)
.addTo(this.mapChart) .addTo(this.mapChart)
@@ -1459,11 +1465,14 @@ export default {
trackingSourceChange () { trackingSourceChange () {
this.timeRefreshChange() this.timeRefreshChange()
}, },
bindMarkerEvent (el, markerData, type) { bindMarkerEvent (el, markerData, type, isSessionRecord) {
el.addEventListener('mouseenter', e => { el.addEventListener('mouseenter', e => {
this.currentMarkerDom = el this.currentMarkerDom = el
if (type === this.tooltipType.human) { if (type === this.tooltipType.human) {
this.currentSubscriber = markerData this.currentSubscriber = markerData
if (isSessionRecord) {
this.currentSubscriber.isSessionRecord = true
}
const toHoverMarkers = this.humanMarkers.filter(m => m.subscriberId === markerData.subscriberId) const toHoverMarkers = this.humanMarkers.filter(m => m.subscriberId === markerData.subscriberId)
toHoverMarkers.forEach(m => { toHoverMarkers.forEach(m => {
m.getElement().classList.add('map-marker--hover') m.getElement().classList.add('map-marker--hover')