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

feat:CN-1570 轨迹地图页右上角饼图、折线图开发

Browse Source
This commit is contained in:
hyx
2024-02-28 07:38:41 +08:00
parent fdafad4c85
commit afc4586c1a
6 changed files with 189 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/mock/location.js
View File

@@ -23,251 +23,251 @@ if (openMock) {
}
}
})
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/active/subscribers.*'), 'get', function (requestObj) {
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/active/trend.*'), 'get', function (requestObj) {
const lineData = [
[
1707357180,
"0"
'0'
],
[
1707357240,
"67781"
'67781'
],
[
1707357300,
"8878"
'8878'
],
[
1707357360,
"71386"
'71386'
],
[
1707357420,
"119827"
'119827'
],
[
1707357480,
"63332"
'63332'
],
[
1707357540,
"139829"
'139829'
],
[
1707357600,
"12184"
'12184'
],
[
1707357660,
"3922"
'3922'
],
[
1707357720,
"41349"
'41349'
],
[
1707357780,
"54148"
'54148'
],
[
1707357840,
"2530"
'2530'
],
[
1707357900,
"17814"
'17814'
],
[
1707357960,
"0"
'0'
],
[
1707358020,
"25336"
'25336'
],
[
1707358080,
"5684"
'5684'
],
[
1707358140,
"46829"
'46829'
],
[
1707358200,
"2546"
'2546'
],
[
1707358260,
"33345"
'33345'
],
[
1707358320,
"304847"
'304847'
],
[
1707358380,
"73994"
'73994'
],
[
1707358440,
"170837"
'170837'
],
[
1707358500,
"35891"
'35891'
],
[
1707358560,
"138272"
'138272'
],
[
1707358620,
"194981"
'194981'
],
[
1707358680,
"292987"
'292987'
],
[
1707358740,
"95844"
'95844'
],
[
1707358800,
"7424"
'7424'
],
[
1707358860,
"22057"
'22057'
],
[
1707358920,
"61791"
'61791'
],
[
1707358980,
"23838"
'23838'
],
[
1707359040,
"11664"
'11664'
],
[
1707359100,
"76485"
'76485'
],
[
1707359160,
"37542"
'37542'
],
[
1707359220,
"40851"
'40851'
],
[
1707359280,
"27611"
'27611'
],
[
1707359340,
"170709"
'170709'
],
[
1707359400,
"2290"
'2290'
],
[
1707359460,
"15577"
'15577'
],
[
1707359520,
"124024"
'124024'
],
[
1707359580,
"22947"
'22947'
],
[
1707359640,
"4131"
'4131'
],
[
1707359700,
"208705"
'208705'
],
[
1707359760,
"120407"
'120407'
],
[
1707359820,
"58706"
'58706'
],
[
1707359880,
"90036"
'90036'
],
[
1707359940,
"41000"
'41000'
],
[
1707360000,
"87489"
'87489'
],
[
1707360060,
"12170"
'12170'
],
[
1707360120,
"24611"
'24611'
],
[
1707360180,
"25815"
'25815'
],
[
1707360240,
"50903"
'50903'
],
[
1707360300,
"102385"
'102385'
],
[
1707360360,
"58121"
'58121'
],
[
1707360420,
"95365"
'95365'
],
[
1707360480,
"66674"
'66674'
],
[
1707360540,
"89708"
'89708'
],
[
1707360600,
"64098"
'64098'
],
[
1707360660,
"41778"
'41778'
],
[
1707360720,
"246241"
'246241'
],
[
1707360780,
"0"
'0'
]
]
return {
@@ -280,4 +280,24 @@ if (openMock) {
}
}
})
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/active/count.*'), 'get', function (requestObj) {
const item = JSON.parse(requestObj.body)
if (item && item.cycle === 0) {
return {
msg: 'success',
code: 200,
data: {
total: 19366
}
}
} else {
return {
msg: 'success',
code: 200,
data: {
total: 16366
}
}
}
})
}

3
src/utils/api.js
View File

@@ -355,7 +355,8 @@ export const api = {
location: {
map: apiVersion + '/locationIntelligence/map',
density: apiVersion + '/locationIntelligence/population/density',
trend: apiVersion + '/locationIntelligence/active/subscribers'
trend: apiVersion + '/locationIntelligence/active/trend',
count: apiVersion + '/locationIntelligence/active/count'
}
}

2
src/utils/constants.js
View File

@@ -1961,7 +1961,7 @@ export const pluginBasicInfo = [
schedule: 'plugin.hourly',
desc: 'knowledgeBase.desc.vpnunlimited',
iconUrl: 'images/knowledge-base-logo/vpnunlimited.png'
},
}
]
export const builtInKnowledgeBaseBasicInfo = [

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

@@ -26,14 +26,23 @@
<div class="analysis-map" id="analysisMap"></div>
<div class="analysis-statistics">
<div class="analysis-statistics__chart">
<div class="chart__header">Population Density</div>
<div class="chart__header">{{$t('locationIntelligence.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">
<div class="legend-icon" :style="`background:rgb(${legend.color});`"></div>
<div class="legend-range" >{{legend.start}}~{{legend.end}}</div>
<div class="legend-count">{{legend.count}}</div>
</div>
</div>
</div>
</div>
<div class="analysis-statistics__chart">
<div class="chart__header">Active Subscribers</div>
<div class="chart__header">{{$t('locationIntelligence.activeSubscribers')}}</div>
<div class="chart__statistics">
<div class="statistics-number">19334</div>
<div class="statistics-trend">-{{valueToRangeValue(0.39542, unitTypes.percent).join(' ')}}</div>
<div class="statistics-number">{{activeCount}}</div>
<div class="statistics-trend">-{{valueToRangeValue(activeCountChain, unitTypes.percent).join(' ')}}</div>
</div>
<div class="chart__drawing" id="activeSubscribersChart"></div>
</div>
@@ -188,7 +197,9 @@ export default {
hexagon: 'hexagon',
baseStation: 'base-station',
human: 'human'
}
},
activeCount: '',
activeCountChain: ''
}
},
methods: {
@@ -254,6 +265,7 @@ export default {
// 右侧关注列表
// 右上角折线图
_this.renderActiveSubscribersLine()
})
function hoverTrigger (source, id, hover) {
map.setFeatureState({ source, id }, { hover })
@@ -279,7 +291,9 @@ export default {
if (!this.pieChart) {
this.pieChart = echarts.init(document.getElementById('populationDensityChart'))
}
this.$nextTick(() => {
this.pieChart.setOption(this.pieOption)
})
} catch (e) {
this.errorMsgHandler(e)
console.error(e)
@@ -287,6 +301,37 @@ export default {
this.loading.pieLoading = false
}
},
async renderActiveSubscribersLine () {
const params = {
...this.timeFilter
}
this.loading.lineLoading = true
try {
const curCountResponse = await axios.get(api.location.count, { ...params, cycle: 0, data: { cycle: 0 } })// 当前周期活跃用户总数
const preCountResponse = await axios.get(api.location.count, { ...params, cycle: 1, data: { cycle: 1 } })// 上一周期活跃用户总数
this.activeCount = curCountResponse.data.data.total
const preActiveCount = preCountResponse.data.data.total
if (preActiveCount !== 0) {
this.activeCountChain = (this.activeCount - preActiveCount) / preActiveCount
}
const trendResponse = await axios.get(api.location.trend, { params })
const activeSubscribersData = trendResponse.data.data.result.values
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.errorMsgHandler(e)
console.error(e)
} finally {
this.loading.lineLoading = false
}
},
async queryHexagon () {
const params = {
...this.boundaryBox,
@@ -569,6 +614,49 @@ export default {
color: #353636;
font-size: 16px;
}
.chart__body {
display:flex;
flex-direction:row;
width:100%;
height:calc(100% - 32px);
.chart__legend {
width:calc(60% - 22px);
height: 100%;
display:flex;
flex-direction:column;
justify-content: center;
.legend-item {
display:flex;
flex-direction:row;
justify-content: left;
align-items: center;
padding-top:2px;
padding-bottom:2px;
.legend-icon {
width:16px;
height:6px;
border-radius: 2px;
margin-right:10px;
}
.legend-range {
margin-right:40px;
width:54px;
font-family: Helvetica;
font-size: 12px;
color: #575757;
line-height: 12px;
font-weight: 400;
}
.legend-count {
font-family: Helvetica;
font-size: 12px;
color: #353636;
line-height: 12px;
font-weight: 400;
}
}
}
}
.chart__statistics {
display: flex;
height: 20px;
@@ -590,7 +678,9 @@ export default {
}
}
.chart__drawing {
height: calc(100% - 32px);
height: 100%;
width:calc(40% + 12px);
margin-right:10px;
}
#activeSubscribersChart {
height: calc(100% - 52px);

1
src/views/location/chartOption.js
View File

@@ -3,6 +3,7 @@ export const pieOption = {
trigger: 'item'
},
legend: {
show: false,
right: 'right',
top: 'middle',
orient: 'vertical',