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

CN-708 feat: 色块图调整为蜂窝图

Browse Source
This commit is contained in:
chenjinsong
2022-09-16 17:41:57 +08:00
parent ddc47208e1
commit 99b1a5c6ef
3 changed files with 131 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/assets/css/components/views/charts2/linkBlock.scss
View File

@@ -2,6 +2,65 @@
$blue: #046ECA;
$grey: #353636;
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
.block-list {
display: flex;
position: relative;
width: calc(50% - 10px);
border: 1px solid #E2E5EC;
border-radius: 4px;
background-color: #F7F7F7;
.block-list__title {
position: absolute;
font-size: 14px;
color: #046ECA;
top: 16px;
left: 20px;
}
.block-list__list {
display: flex;
flex-wrap: wrap;
width: 260px;
margin: auto;
.block-list__block {
margin: 0 3px 0 2px;
height: 51px;
.block-hex {
overflow: hidden;
display: block;
width: 44px;
height: 51px;
transform: rotate(-60deg) skewY(30deg);
}
.block-hex-in {
display: block;
width: 44px;
height: 51px;
text-align: center;
transform: skewY(-30deg) rotate(60deg);
cursor: pointer;
}
&:nth-child(9n + 1) {
margin-left: 27px;
}
&:nth-child(n + 5) {
margin-top: -9px;
}
}
}
}
}
/*.link-blocks {
$blue: #046ECA;
$grey: #353636;
border: 1px solid #E2E5EC;
height: 100%;
width: 100%;
@@ -90,7 +149,7 @@
}
}
}
}
}*/
.link-block__popper {
background-color: #1F2B33 !important;
border-color: #F7F7F7 !important;

4
src/mock/linkMonitor.js
View File

@@ -4,8 +4,8 @@ const openMock = true
if (openMock) {
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/links.*'), 'get', function (requestObj) {
const linkData = []
for (let i = 0; i < 94; i++) {
linkData.push({ linkId: 20 * (i + 300), totalBitsRate: Math.floor(Math.pow(1.1, i) * 10000) })
for (let i = 0; i < 10; i++) {
linkData.push({ linkId: 20 * (i + 300), totalBitsRate: Math.floor(Math.pow(1.3, i) * 10000) })
}
return {
msg: 'success',

70
src/views/charts2/charts/linkMonitor/LinkBlock.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="link-blocks">
<el-tabs v-model="tab">
<!--<el-tabs v-model="tab">
<el-tab-pane :label="$t('linkMonitor.links')" :name="0"></el-tab-pane>
<el-tab-pane :label="$t('linkMonitor.nextHopInternet')" :name="1"></el-tab-pane>
</el-tabs>
@@ -40,6 +40,74 @@
<div class="legend__color-piece"></div>
<div class="legend__desc">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
</div>
</div> -->
<div class="block-list">
<div class="block-list__title">{{$t('linkMonitor.links')}}</div>
<div class="block-list__list">
<el-popover
placement="bottom"
trigger="hover"
popper-class="link-block__popper"
v-for="(item, index) in linkData"
:width="220"
:key="index"
>
<template #reference>
<div class="block-list__block" :key="index">
<span class="block-hex">
<span class="block-hex-in" :style="`background-color: ${item.color}`"></span>
</span>
</div>
</template>
<template #default>
<div class="popper-content">
<div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
<div class="popper-content__link-info">
<div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
<div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
</div>
<div class="popper-content__link-info">
<div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
<div class="info__value">50%</div>
</div>
</div>
</template>
</el-popover>
</div>
</div>
<div class="block-list">
<div class="block-list__title">{{$t('linkMonitor.nextHopInternet')}}</div>
<div class="block-list__list">
<el-popover
placement="bottom"
trigger="hover"
popper-class="link-block__popper"
v-for="(item, index) in linkData"
:width="220"
:key="index"
>
<template #reference>
<div class="block-list__block" :key="index">
<span class="block-hex">
<span class="block-hex-in" :style="`background-color: ${item.color}`"></span>
</span>
</div>
</template>
<template #default>
<div class="popper-content">
<div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
<div class="popper-content__link-info">
<div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
<div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
</div>
<div class="popper-content__link-info">
<div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
<div class="info__value">50%</div>
</div>
</div>
</template>
</el-popover>
</div>
</div>
</div>
</template>