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

CN-497 feat: dns dashboard整屏滚动

Browse Source
This commit is contained in:
chenjinsong
2022-04-25 14:27:36 +08:00
parent 01760c28a4
commit 9d37cc29cd
7 changed files with 180 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/css/components/views/charts/panel.scss
View File

@@ -1,5 +1,4 @@
.cn-panel2 {
position: relative;
.panel__time {
position: absolute;
right: 10px;
@@ -10,6 +9,7 @@
margin-left: 10px;
}
}
position: relative;
.chart-list {
&>.vue-grid-layout>.vue-grid-item, &>.dns-screen {
&>.panel-chart {
@@ -495,7 +495,18 @@
}
}
}
.cn-panel2__whole-screen {
height: calc(100vh - 50px);
width: 100%;
padding: 20px 10px 0 10px;
transition: .2s all linear;
opacity: 1;
}
.cn-panel2__whole-screen.cn-panel2__whole-screen--collapse {
height: 0 !important;
padding-top: 0;
opacity: 0;
}
.entity-detail-tool {
display: flex;
justify-content: space-between;

4
src/views/charts/Chart.vue
View File

@@ -21,7 +21,6 @@
:entity="entity"
@getChartData="getChartData"
@showLoading="showLoading"
@finishOneMap="finishOneMap"
></chart-map>
<chart-single-value
@@ -434,9 +433,6 @@ export default {
showLoading (show) {
this.$emit('showLoading', show)
},
finishOneMap (show) {
this.$emit('handleSpecialChartFinishState', true)
},
getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
},

387
src/views/charts/Panel.vue
View File

@@ -1,90 +1,74 @@
<template>
<div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail" > <!-- @scroll="wholeScreenScroll" -->
<div id="cn-panel" class="cn-panel2">
<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>
<!--
<div v-if="panelType===3" class="nav">
<input type="radio" class="wholeScreenChekck" name="radio-set" checked id="nav1">
<input type="radio" class="wholeScreenChekck" name="radio-set" id="nav2">
<div class="scroll">
<section class="panel" id="panel1">
<dns-screen id="dnsScreen" :copy-data-list="chartList"
ref="dnsScreen"
:time-filter="timeFilter"
:entity="entity">
</dns-screen>
</section>
<section class="panel" id="panel2">
<dns-screen id="dnsScreen2" :copy-data-list="chartList"
ref="dnsScreen"
:time-filter="timeFilter"
:entity="entity">
</dns-screen>
<div style="width:100%;height:500px;border:solid 1px red;padding:10px 10px 20px;">
qqq
</div>
</section>
</div>
</div> -->
<panel-chart-list
ref="panelChartList"
:time-filter="timeFilter"
:data-list="chartList"
:panel-lock="panelLock"
:entity="entity"
:whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
@finish="finish"
>
</panel-chart-list>
<div class="panel-box">
<div
class="cn-panel2 cn-panel2__whole-screen"
v-if="panel.params && panel.params.wholeScreenScroll"
id="wholeScreenBox"
>
<dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"
:copy-data-list="chartList"
ref="dnsScreen"
:time-filter="timeFilter"
:entity="entity">
</dns-screen>
</div>
</div>
<div class="cn-entity-detail" id="cn-entity-detail" v-else>
<div class="entity-detail__body">
<div class="cn-panel2" id="cn-panel">
<div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto; height: 100%;" v-if="!isEntityDetail" >
<div id="cn-panel" class="cn-panel2">
<div class="panel__time" :style="scrolledOut ? '' : 'position: fixed; top: 70px; padding-right: 10px;'">
<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>
<panel-chart-list
ref="panelChartList"
:time-filter="timeFilter"
:data-list="chartList"
:panel-lock="panelLock"
:entity="entity"
:whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
>
</panel-chart-list>
</div>
</div>
<div class="cn-entity-detail" id="cn-entity-detail" v-else>
<div class="entity-detail__body">
<div class="cn-panel2" id="cn-panel">
<panel-chart-list
ref="panelChartList"
:time-filter="timeFilter"
:data-list="chartList"
:panel-lock="panelLock"
:entity="entity"
>
</panel-chart-list>
</div>
</div>
</div>
</div>
</template>
<script>
import { useRoute } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
import { panelTypeAndRouteMapping, wholeScreenRouterMapping } from '@/utils/constants'
import { api, getPanelList, getChartList } from '@/utils/api'
import { getNowTime } from '@/utils/date-util'
import { scrollToTop } from '@/utils/tools'
import {
isGroup,
isBlock,
getGroupHeight
} from './charts/tools'
import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
export default {
name: 'Panel',
components: {
DnsScreen
},
props: {
entity: Object,
isEntityDetail: Boolean,
typeName: String
},
components: {
DnsScreen
},
data () {
return {
chartList: [], // 普通panel的chart
@@ -93,18 +77,9 @@ export default {
detailTabs: [],
detailChartList: [],
currentTab: '',
scrolledOut: false,
isCryptocurrency: false, // 是否为挖矿列表
scroll: {
prevent: false, // 阻止滚动
prevScrollTop: 0 // 前一次滚动条位置
},
wholeScreenRouterMapping,
isFullScreen: true, // 当前是否为全屏滚动页面
// isSecondScreen:false,//当前是否为全屏滚动页面下面的页面
screenNum: 1, // 当前屏幕编号
wheel: null, // 鼠标滚动事件
allDone: false,
isReachSecond: false
wholeScreenRouterMapping
}
},
async mounted () {
@@ -114,39 +89,7 @@ export default {
if (!this.$_.isEmpty(this.detailTabs)) {
this.currentTab = this.detailTabs[0].id + ''
}
this.$nextTick(() => {
if (this.panelType === 3) {
const self = this
const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
self.wheel = function (event) {
event.stopPropagation()// 阻止冒泡事件
if (!self.allDone) {
if (event && event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
return false
}
let delta = 0
if (!event)// for ie
{ event = window.event }
if (event.wheelDelta) { // ie,opera
delta = event.wheelDelta / 120
} else if (event.detail) {
delta = -event.detail / 3
}
if (delta) {
self.handle(delta, self, event)
}
}
if (panelList.addEventListener) {
panelList.addEventListener('DOMMouseScroll', self.wheel, { passive: false })
}
panelList.onmousewheel = self.wheel
}
})
window.addEventListener('mousewheel', this.handleWholeScreen)
},
setup (props, ctx) {
const panel = ref({})
@@ -161,7 +104,11 @@ export default {
const dateRangeValue = isEntityDetail(panelType) ? 60 * 24 : 60
const { startTime, endTime } = getNowTime(dateRangeValue)
const timeFilter = ref({ startTime, endTime, dateRangeValue })
const { currentRoute } = useRouter()
return {
currentPath: currentRoute.value.path,
panelType,
panel,
timeFilter,
@@ -169,6 +116,28 @@ export default {
}
},
methods: {
handleWholeScreen (e) {
const screenBoxDom = document.getElementById('wholeScreenBox')
const panelListDom = document.getElementById('panelList')
if (screenBoxDom) {
if (screenBoxDom.contains(e.target)) {
if (e.deltaY > 0) {
this.scrolledOut = true
screenBoxDom.classList.add('cn-panel2__whole-screen--collapse')
}
} else {
if (e.deltaY < 0 && panelListDom.scrollTop === 0) {
this.scrolledOut = false
screenBoxDom.classList.remove('cn-panel2__whole-screen--collapse')
}
}
}/* else {
const panelListDom = document.getElementById('panelList')
if (panelListDom.scrollTop === 0 && e.deltaY < 0) {
this.scrolledOut = false
}
}*/
},
async init () {
const panels = await getPanelList({ type: this.panelType })
if (panels && panels.length > 0) {
@@ -196,9 +165,6 @@ export default {
this.currentTab = this.detailTabs[index].id + ''
this.detailChartList = this.detailTabs[index].children
},
finish () {
this.allDone = true
},
preventWheel (event) {
if (event && event.preventDefault) {
event.preventDefault()
@@ -266,226 +232,7 @@ export default {
},
groupParentCalcHeight (params) {
this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
},
wholeScreenScroll (e) {
if (this.scroll.prevent) {
return
}
this.scroll.prevent = true
const clientHeight = e.target.clientHeight
const currentScrollTop = e.target.scrollTop
if (currentScrollTop > this.scroll.prevScrollTop) {
// 向下滚动，若top在clientHeight内，则整屏滚动下去
this.scroll.prevScrollTop = currentScrollTop
if (currentScrollTop < clientHeight) {
scrollToTop(e.target, clientHeight, 200, 'down')
setTimeout(() => {
this.scroll.prevScrollTop = e.target.scrollTop
}, 210)
}
} else if (currentScrollTop < this.scroll.prevScrollTop) {
// 向上滚动，若top在clientHeight内，则滚动到最顶部
this.scroll.prevScrollTop = currentScrollTop
if (currentScrollTop < clientHeight) {
scrollToTop(e.target, 0, 200, 'up')
setTimeout(() => {
this.scroll.prevScrollTop = e.target.scrollTop
}, 210)
}
}
const vm = this
setTimeout(() => {
vm.scroll.prevent = false
}, 210)
},
scrollIntoDown () {
const anchorEle = document.getElementById('gridLayout')
console.log('down....')
if (anchorEle) {
console.log('down')
anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
}
},
scrollIntoUp (id) {
const anchorEle = document.getElementById(id)
if (anchorEle) {
anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
}
},
scrollInto (id, event) {
const anchorEle = document.getElementById(id)
if (anchorEle) {
const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
panelList.onmousewheel = null
panelList.removeEventListener('DOMMouseScroll', this.wheel)
anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
this.preventWheel(event)
console.log('scrolling。。。。')
setTimeout(() => {
const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
if (panelList.addEventListener) {
panelList.addEventListener('DOMMouseScroll', this.wheel, { passive: false })
}
panelList.onmousewheel = this.wheel
console.log('add event。。。。')
}, 200)
}
},
preventDefault (event) {
if (event && event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
},
handle (delta, self, event) {
const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
const currentScrollTop = panelList.scrollTop
console.log('****************开始******************')
console.log('self.screenNum=' + self.screenNum)
console.log('panelList.offsetHeight=' + panelList.offsetHeight)
console.log('self.isFullScreen=' + self.isFullScreen)
console.log('self.isReachSecond =' + self.isReachSecond)
console.log('currentScrollTop=' + currentScrollTop)
if (delta < 0) {
if (self.isFullScreen || self.screenNum === 1 || currentScrollTop < panelList.offsetHeight - 15) {
console.log('1下')
self.isFullScreen = false
self.screenNum = 2
self.scrollIntoDown()
self.preventWheel(event)
self.isReachSecond = true
// panelList.removeEventListener('DOMMouseScroll',self.wheel)
// panelList.onmousewheel=null
} else if (!self.isFullScreen || self.screenNum === 2 || currentScrollTop > panelList.offsetHeight - 10) {
console.log('else下')
self.screenNum = 3
self.isFullScreen = false
self.isReachSecond = false
// self.scrollIntoDown()
} else {
self.isReachSecond = false
}
} else if (delta > 0) {
if (self.screenNum === 3 || (currentScrollTop < panelList.offsetHeight + 100 && currentScrollTop > panelList.offsetHeight - 10)) {
console.log('上1')
self.isReachSecond = true
self.scrollIntoUp('gridLayout')
self.screenNum = 2
self.isFullScreen = false
self.preventWheel(event)
} else if (self.isFullScreen || self.screenNum === 2 || self.screenNum === 1 || currentScrollTop <= panelList.offsetHeight + 100) {
console.log('上2')
self.scrollIntoUp('dnsScreenAnchor')
self.screenNum = 1
self.isFullScreen = true
self.isReachSecond = false
self.preventWheel(event)
} else {
console.log('上3')
self.isFullScreen = false
self.isReachSecond = false
}
}
}
}
}
</script>
<style scoped >
body{
-webkit-font-smoothing:antialiased;
}
.nav{
width:100%;
position:absolute;
left:0;
bottom:0;
}
.nav input{
opacity:0;
z-index:1000;
}
#nav1,#nav1 + a{
left:0%;
}
#nav2,#nav2 + a{
left:20%;
}
.nav input:checked + a:after{
content:"";
width:0;
height:0;
overflow:hidden;
border:20px solid transparent;
border-bottom-color:#821134;
position:absolute;
bottom:100%;
left:50%;
margin-left:-20px;
}
.scroll,.panel{
width:100%;
height:100%;
position:relative;
text-align:center;
padding-top:0px;
}
.scroll{
left:0;
top:0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
color:#e23a6e;
font-weight:bold;
}
.panel{
overflow: hidden;
}
#nav1:checked ~ .scroll{
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
#nav2:checked ~ .scroll{
-webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
-ms-transform: translateY(-20%);
-o-transform: translateY(-20%);
transform: translateY(-20%);
}
[data-icon]:after{
content:attr(data-icon);
width:200px;
height:200px;
color:#fff;
font-size:90px;
text-align:center;
line-height:200px;
position:absolute;
left:18%;
top:18%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media screen and (max-device-width: 520px){
}
</style>

21
src/views/charts/PanelChart.vue
View File

@@ -41,7 +41,6 @@
:time-filter="timeFilter"
@getChartData="getChartData"
@showLoading="showLoading"
@handleSpecialChartFinishState="handleSpecialChartFinishState"
:tabHandleClickType="tabHandleClickType"
></chart>
</div>
@@ -151,8 +150,7 @@ export default {
}
] // table的所有数据
},
tabHandleClickType: '',
isFinish: false
tabHandleClickType: ''
}
},
computed: {
@@ -266,38 +264,21 @@ export default {
}
}).finally(() => {
this.loading = false
this.handleFinishState()
})
} else if (this.isGroup || this.isTabs) {
this.$refs.chart.$refs.chart.reload()
this.handleFinishState()
} else if (this.isBlock) {
if (!this.chartInfo.firstShow) {
this.chartInfo.firstShow = true
} else {
this.$refs.chart.$refs.chart.reload()
}
this.handleFinishState()
}
} catch (e) {
console.error(e)
setTimeout(() => {
this.loading = false
this.handleFinishState()
}, 200)
} finally {
this.handleFinishState()
}
},
handleSpecialChartFinishState () {
this.$emit('finishOne')
},
handleFinishState () {
if (!this.isMap) {
if (!this.isFinish) {
this.isFinish = true
this.$emit('finishOne')
}
}
},
handleQueryParams () {

123
src/views/charts/PanelChartList.vue
View File

@@ -1,18 +1,8 @@
<template>
<div style="height: calc(100vh - 70px);width: 100%;" v-if="isWholeScreenScroll" id="dnsScreenAnchor">
<dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"
:copy-data-list="copyDataList"
ref="dnsScreen"
:time-filter="timeFilter"
@finishOne="finishOne"
:entity="entity">
</dns-screen>
</div>
<div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
<grid-layout
id="gridLayout"
id="gridLayout"
ref="layout"
v-if="gridLayoutShow"
v-model:layout="normalCopyDataList"
:col-num="30"
:is-draggable="!panelLock"
@@ -44,7 +34,6 @@
:entity="entity"
@groupShow="groupShow"
@showFullscreen="showFullscreen"
@finishOne="finishOne"
></panel-chart>
</grid-item>
</grid-layout>
@@ -76,24 +65,19 @@
<script>
import PanelChart from '@/views/charts/PanelChart'
import VueGridLayout from 'vue-grid-layout'
import { getGroupHeight, getTypeCategory, isGroup } from './charts/tools'
import { getGroupHeight, isGroup, getTypeCategory } from './charts/tools'
import _ from 'lodash'
import { useRouter } from 'vue-router'
import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
import { wholeScreenRouterMapping } from '@/utils/constants'
export default {
name: 'PanelChartList',
components: {
PanelChart,
DnsScreen,
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
props: {
timeFilter: Object, // 时间范围
panelLock: { type: Boolean, default: true },
wholeScreenScroll: { type: Boolean, default: false },
isGroup: Boolean,
entity: Object,
dataList: Array // 看板中所有图表信息
@@ -116,11 +100,7 @@ export default {
chartInfo: {}
},
scrollTop: 0,
scrollTopTimer: null,
wholeScreenRouterMapping,
isWholeScreenScroll: false,
haveDoneChartNum: 0,
allDone: false
scrollTopTimer: null
}
},
methods: {
@@ -136,23 +116,11 @@ export default {
this.$refs['chart' + item.id].getChartData()
}
})
this.$refs.dnsScreen.reload()
},
showFullscreen (show, chartInfo) {
this.fullscreen.chartInfo = chartInfo
this.fullscreen.visible = show
},
finishOne () {
this.haveDoneChartNum++
// console.log("this.haveDoneChartNum="+this.haveDoneChartNum)
if (this.haveDoneChartNum >= this.copyDataList.length) {
// this.allDone = true
setTimeout(() => {
this.$emit('finish')
}, 200)
}
},
groupShow (chart) {
this.copyDataList.forEach((item, index) => {
if (item.id === chart.id) {
@@ -197,12 +165,6 @@ export default {
}
}
},
setup (props) {
const { currentRoute } = useRouter()
return {
currentPath: currentRoute.value.path
}
},
watch: {
dataList: {
deep: true,
@@ -211,52 +173,45 @@ export default {
this.gridLayoutShow = false
this.gridLayoutLoading = true
this.isWholeScreenScroll = false
// const arr = this.$_.cloneDeep(n)
this.noData = !n || n.length < 1
if (n) {
const tempList = n.map(item => {
if (item.params) {
item.params.showHeader = true
}
const height = item.h
return {
...item,
i: item.id,
w: item.w,
h: height,
x: item.x || 0,
y: item.y || 0,
params: item.params,
category: getTypeCategory(item.type) // 类别，是echarts还是map等等
}
const tempList = n.map(item => {
if (item.params) {
item.params.showHeader = true
}
const height = item.h
return {
...item,
i: item.id,
w: item.w,
h: height,
x: item.x || 0,
y: item.y || 0,
params: item.params,
category: getTypeCategory(item.type) // 类别，是echarts还是map等等
}
})
this.$nextTick(() => {
this.copyDataList = JSON.parse(JSON.stringify(tempList))
this.normalCopyDataList = this.copyDataList.filter(function (item) {
return item.y >= -1
})
this.$nextTick(() => {
this.copyDataList = JSON.parse(JSON.stringify(tempList))
this.normalCopyDataList = this.copyDataList.filter(function (item) {
return item.y >= -1
})
setTimeout(() => {
this.gridLayoutShow = true
this.isWholeScreenScroll = this.wholeScreenScroll// 为了解决加载页面时，滚动条先长后短的问题，即 数据要一起显示
})
setTimeout(() => {
this.copyDataList.forEach(item => {
if (isGroup(item.type) && !item.firstShow) {
item.firstShow = true
this.copyDataList = [...this.copyDataList]
this.normalCopyDataList = this.copyDataList.filter(function (item) {
return item.y >= -1
})
this.emitter.emit('groupParentCalcHeight', { chart: item, childrenList: this.copyDataList })
}
})
}, 200)
this.gridLayoutLoading = false
setTimeout(() => {
this.gridLayoutShow = true
})
}
setTimeout(() => {
this.copyDataList.forEach(item => {
if (isGroup(item.type) && !item.firstShow) {
item.firstShow = true
this.copyDataList = [...this.copyDataList]
this.normalCopyDataList = this.copyDataList.filter(function (item) {
return item.y >= -1
})
this.emitter.emit('groupParentCalcHeight', { chart: item, childrenList: this.copyDataList })
}
})
}, 200)
this.gridLayoutLoading = false
})
}
}
}

122
src/views/charts/charts/ChartMap.vue
View File

@@ -157,74 +157,70 @@ export default {
methods: {
unitConvert,
initMap (id) {
try {
// 初始化插件
const chart = am4Core.create(id, am4Maps.MapChart)
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
chart.projection = new am4Maps.projections.Miller()
this.myChart = shallowRef(chart)
// 初始化多边形series（即地图series）
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
// 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
if (this.isMapPoint) {
this.worldImageSeries = shallowRef(this.imageSeriesFactory())
}
// 渲染
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
// 初始化插件
const chart = am4Core.create(id, am4Maps.MapChart)
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
chart.projection = new am4Maps.projections.Miller()
this.myChart = shallowRef(chart)
// 初始化多边形series（即地图series）
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
// 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
if (this.isMapPoint) {
this.worldImageSeries = shallowRef(this.imageSeriesFactory())
}
// 渲染
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
// 地图点击事件
if (this.isMapBlock) {
this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
if (countryId) {
ev.target.series.chart.zoomToMapObject(ev.target)
ev.target.isHover = false
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = shallowRef(this.polygonSeriesFactory())
this.countrySeries.geodata = geoData
this.polygonSeries.hide()
const country = ev.target.dataItem.dataContext.serverCountry
const queryParams = { ...this.queryParams, country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
}
}
})
} else if (this.isMapPoint) {
this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
// 地图点击事件
if (this.isMapBlock) {
this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
if (countryId) {
ev.target.series.chart.zoomToMapObject(ev.target)
ev.target.isHover = false
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = shallowRef(this.polygonSeriesFactory())
this.countrySeries.geodata = geoData
this.countryImageSeries = shallowRef(this.imageSeriesFactory())
this.polygonSeries.hide()
this.worldImageSeries.hide()
const country = ev.target.dataItem.dataContext.name
const queryParams = { ...this.queryParams, ipLocationCountry: country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
}
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = shallowRef(this.polygonSeriesFactory())
this.countrySeries.geodata = geoData
this.polygonSeries.hide()
const country = ev.target.dataItem.dataContext.serverCountry
const queryParams = { ...this.queryParams, country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
}
})
}
// dns地图legend上的数据
if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
setTimeout(() => {
this.chartInfo.params.legendUrl.forEach((url, i) => {
getData(url).then(data => {
this.legends[i].value = data
})
}
})
} else if (this.isMapPoint) {
this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
ev.target.isHover = false
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = shallowRef(this.polygonSeriesFactory())
this.countrySeries.geodata = geoData
this.countryImageSeries = shallowRef(this.imageSeriesFactory())
this.polygonSeries.hide()
this.worldImageSeries.hide()
const country = ev.target.dataItem.dataContext.name
const queryParams = { ...this.queryParams, ipLocationCountry: country }
const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
}
}
})
}
// dns地图legend上的数据
if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
setTimeout(() => {
this.chartInfo.params.legendUrl.forEach((url, i) => {
getData(url).then(data => {
this.legends[i].value = data
})
})
}
} finally {
this.$emit('finishOneMap')
})
}
},
polygonSeriesFactory () {

6
src/views/charts/wholeScreenScroll/DnsScreen.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="chart-list scroll-hide" style="display:grid;height:calc(100vh - 70px);width:100%;grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(19,1fr);grid-gap:10px;padding-left: 10px;padding-right: 10px;">
<div class="chart-list" style="display:grid;height:calc(100vh - 90px);width:100%;grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(19,1fr);grid-gap:10px;padding-left: 10px;padding-right: 10px;">
<div v-for="item in dnsScreenDataList"
:key="item.id"
:ref="'grid-item' + item.id"
@@ -11,7 +11,6 @@
:chart-info="item"
:time-filter="timeFilter"
:entity="entity"
@finishOne="finishOne"
></panel-chart>
</div>
</div>
@@ -37,9 +36,6 @@ export default {
this.$refs['chart' + item.id].getChartData()
}
})
},
finishOne () {
this.$emit('finishOne')
}
},
computed: {