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

CN-1705 fix: 缩放等级变更时的交互

Browse Source
This commit is contained in:
chenjinsong
2024-09-13 18:05:08 +08:00
parent 202a5707c0
commit d986170c55
9 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -190,6 +190,7 @@ $color-highlight: #CC4444;
height: 30px;
border: 2px solid $color-white;
z-index: 2;
display: flex !important;
&.map-marker--human svg {
width: 21px;
@@ -208,6 +209,7 @@ $color-highlight: #CC4444;
border: 2px solid $color-white;
background-color: $color-highlight;
z-index: 3;
display: flex !important;
svg {
width: 21px;

16
src/components/rightBox/location/MyFollowBox.vue
View File

@@ -13,9 +13,9 @@
:api="url"
>
<template #top-tool-left>
<button id="cancleFollows" class="business-button business-button--light margin-r-10"
:disabled="disableCancle" @click="cancleFollowBatch">
<span>{{ $t('location.cancleFollow') }}</span>
<button id="cancelFollows" class="business-button business-button--light margin-r-10"
:disabled="disableCancel" @click="cancelFollowBatch">
<span>{{ $t('location.cancelFollow') }}</span>
</button>
</template>
<template #default>
@@ -64,7 +64,7 @@ export default {
return {
url: api.location.followedSubscriber,
tableId: 'myFollowTable',
disableCancle: true
disableCancel: true
}
},
mounted () {
@@ -113,9 +113,9 @@ export default {
this.batchDeleteObjs.push(obj)
}
})
this.disableCancle = this.batchDeleteObjs.length < 1
this.disableCancel = this.batchDeleteObjs.length < 1
},
cancleFollowBatch() {
cancelFollowBatch() {
const ids = []
if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
this.batchDeleteObjs.forEach(item => {
@@ -125,7 +125,7 @@ export default {
this.toggleLoading(true)
axios.delete(api.location.follow + '?subscriberIds=' + ids.join(',')).then(response => {
if (response.status === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
this.batchDeleteObjs.forEach(item => {
item.isFollowed = 0
})
@@ -136,7 +136,7 @@ export default {
this.$message.error(e.response.data.message)
}).finally(() => {
this.toggleLoading(false)
this.$emit('handleCancleFollowBatch', this.batchDeleteObjs)
this.$emit('handleCancelFollowBatch', this.batchDeleteObjs)
})
},
/* 关闭弹框 */

6
src/components/table/location/MyFollowTable.vue
View File

@@ -48,7 +48,7 @@
</template>
</template>
<template v-else-if="item.prop === 'isFollowed'" >
<span class="follow-cursor" v-if="scope.row[item.prop] === 1" @click="cancleFollow(scope.row)"><i class="cn-icon cn-icon-follow-fill"></i></span>
<span class="follow-cursor" v-if="scope.row[item.prop] === 1" @click="cancelFollow(scope.row)"><i class="cn-icon cn-icon-follow-fill"></i></span>
<span class="follow-cursor" v-else @click="follow(scope.row)"><i class="cn-icon cn-icon-follow"></i></span>
</template>
<span v-else>{{scope.row[item.prop] || '-'}}</span>
@@ -109,10 +109,10 @@ export default {
}
},
methods: {
cancleFollow(item) {
cancelFollow(item) {
axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
if (res.status === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
/* 刷新列表 */
item.isFollowed = 0
this.$refs.dataTable.toggleRowSelection(item, false)

4
src/components/table/setting/knowledgeBaseTableForCard.vue
View File

@@ -220,7 +220,7 @@
</el-form>
</div>
<div class="dialog-footer">
<button @click="cancle" class="business-button business-button--light">{{ $t('overall.cancel') }}</button>
<button @click="cancel" class="business-button business-button--light">{{ $t('overall.cancel') }}</button>
<button @click="submitConfirm" class="business-button">{{ $t('tip.confirm') }}</button>
</div>
</template>
@@ -590,7 +590,7 @@ export default {
submit () {
this.$refs.knowledgeUpload.submit()
},
cancle () {
cancel () {
this.showAddUpdateDialog = false
},
clickCard (data, event) {

6
src/components/table/setting/knowledgeBaseTableForCard2.vue
View File

@@ -221,7 +221,7 @@
</el-form>
</div>
<div class="dialog-footer">
<el-button @click="cancle">{{ $t('overall.cancel') }}</el-button>
<el-button @click="cancel">{{ $t('overall.cancel') }}</el-button>
<el-button type="primary" @click="submitConfirm">{{ $t('tip.confirm') }}</el-button>
</div>
</template>
@@ -550,7 +550,7 @@ export default {
submit () {
this.$refs.knowledgeUpload.submit()
},
cancle () {
cancel () {
this.showAddUpdateDialog = false
},
clickCard (data, event) {
@@ -698,7 +698,7 @@ export default {
this.switchKnowledgeId = id
return false
},
cancleSwitch () {
cancelSwitch () {
this.showConfirmSwitch = false
},
switchLearning () {

6
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -753,7 +753,7 @@ export default {
this.changeUrlTabState()
this.getChartData(queryParams)
},
cancleSortArrow () {
cancelSortArrow () {
// 取消表格排序高亮的箭头
if (this.column.prop) {
// const table = this.$refs['dataTable_' + this.index]
@@ -810,7 +810,7 @@ export default {
this.toggleLoading(true)
this.$nextTick(() => {
// 取消表格排序高亮的箭头
this.cancleSortArrow()
this.cancelSortArrow()
// 设置默认排序
if (this.tableSortColumn) {
const refName = 'dataTable_' + this.tableSortTab
@@ -1694,7 +1694,7 @@ export default {
item.order = ''
})
}
this.cancleSortArrow()
this.cancelSortArrow()
this.column = {}
this.index = 0
this.tableSortColumn = ''

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

@@ -72,6 +72,7 @@
</div>
<div class="chart-line__drawing" id="activeSubscribersChart"></div>
</div>
<!-- subscriber list -->
<div class="analysis-statistics__title">
{{$t('location.subscribers')}}
<simple-loading :loading="loading.subscriberLoading" placement="right" size="small"></simple-loading>
@@ -1048,15 +1049,9 @@ export default {
}
},
async hexagonVisualRangeChange (e) {
const currentZoom = this.mapChart.getZoom()
console.info(`current zoom: ${currentZoom}`)
if (currentZoom < 11) {
this.hideBaseStation()
this.hideFollowed()
} else {
this.showBaseStation()
this.showFollowed()
}
this.currentZoom = this.mapChart.getZoom()
console.info(`current zoom: ${this.currentZoom}`)
if (this.updateBoundaryBox()) {
const oldSourceData = this.mapChart.getSource('hexGrid')._data
const hexagonData = await this.queryHexagon()
@@ -1225,13 +1220,13 @@ export default {
subscriberListMouseEnter (subscriber) {
const target = this.humanMarkers.find(m => subscriber.subscriberId === m.subscriberId)
if (target) {
target.getElement().classList.add('map-marker--hover')
target.addClassName && target.addClassName('map-marker--hover')
}
},
subscriberListMouseLeave (subscriber) {
const target = this.humanMarkers.find(m => subscriber.subscriberId === m.subscriberId)
if (target) {
target.getElement().classList.remove('map-marker--hover')
target.removeClassName && target.removeClassName('map-marker--hover')
}
},
async scrollList (e) {
@@ -1298,7 +1293,7 @@ export default {
},
showBaseStation () {
this.baseStationMarkers.forEach(bs => {
bs.addClassName && bs.removeClassName('map-marker--hidden')
bs.removeClassName && bs.removeClassName('map-marker--hidden')
})
},
hideFollowed () {
@@ -1308,7 +1303,7 @@ export default {
},
showFollowed () {
this.humanMarkers.forEach(human => {
human.addClassName && human.removeClassName('map-marker--hidden')
human.removeClassName && human.removeClassName('map-marker--hidden')
})
},
// 关注列表的添加、删除追踪
@@ -1521,7 +1516,7 @@ export default {
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.cancleFollow.success') })
this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
/* 刷新右侧列表 */
item.isFollowed = 0
// 删除地图中对应的人
@@ -1541,7 +1536,7 @@ export default {
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.cancleFollow.success') })
this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
// 删除地图中对应的人
this.humanMarkers.forEach(marker => {
if (marker.subscriberId === item.subscriberId) {
@@ -1569,6 +1564,13 @@ export default {
this.humanMarkers = []
const mapFollowedSubscriberData = await this.queryMapFollowedSubscriber()
this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human)
if (this.currentZoom < 11) {
this.hideBaseStation()
this.hideFollowed()
} else {
this.showBaseStation()
this.showFollowed()
}
} else {
this.$message.error(res.data.message)
}
@@ -1728,6 +1730,15 @@ export default {
handler (n) {
this.loading.mapLoading = n || this.loading.timeBarLoading || this.loading.hexagonLoading
}
},
currentZoom (n, o) {
if (o && n < 11) {
this.hideBaseStation()
this.hideFollowed()
} else {
this.showBaseStation()
this.showFollowed()
}
}
},
computed: {
@@ -1932,6 +1943,7 @@ export default {
loading, // 控制组件内各处loading图标
maxZoom: mapConfig.maxZoom, // 地图最小缩放比例
minZoom: mapConfig.minZoom, // 地图最大缩放比例
currentZoom: ref(null),
mapLevel: mapConfig.mapLevel, // 地图精度 1、2、3
unitTypes,
defaultZoom: mapConfig.defaultZoom, // 地图默认缩放比例

6
src/views/setting/KnowledgeBase.vue
View File

@@ -149,9 +149,9 @@ export default {
this.batchDeleteObjs.push(data)
}
} else {
const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
if (cancleObjIndex > -1) {
this.batchDeleteObjs.splice(cancleObjIndex, 1)
const cancelObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
if (cancelObjIndex > -1) {
this.batchDeleteObjs.splice(cancelObjIndex, 1)
}
}
if (this.batchDeleteObjs.length === 1) {

6
src/views/setting/KnowledgeBaseUserDefinedList.vue
View File

@@ -203,9 +203,9 @@ export default {
this.batchDeleteObjs.push(data)
}
} else {
const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
if (cancleObjIndex > -1) {
this.batchDeleteObjs.splice(cancleObjIndex, 1)
const cancelObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
if (cancelObjIndex > -1) {
this.batchDeleteObjs.splice(cancelObjIndex, 1)
}
}
if (this.batchDeleteObjs.length === 1) {