CN-647 feat: Dashboard - npm - 应用评分图开发
This commit is contained in:
@changcode
@@ -52,6 +52,7 @@
|
||||
@import './views/charts2/networkOverviewTabs';
|
||||
@import './views/charts2/npmNetworkQuantity';
|
||||
@import './views/charts2/networkOverviewApps';
|
||||
@import './views/charts2/npmAppCategoryScore';
|
||||
@import './views/charts2/npmTabs';
|
||||
@import './views/charts2/npmMap';
|
||||
//@import '../chart';
|
||||
|
||||
164
src/assets/css/components/views/charts2/npmAppCategoryScore.scss
Normal file
164
src/assets/css/components/views/charts2/npmAppCategoryScore.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
.npm-app {
|
||||
$grey:#353636;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.npm-app-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.npm-app-letter {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin: 0 5px 12.3px 0;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
height: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.npm-app-body {
|
||||
display: flex;
|
||||
.npm-app-body-patch {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
.npm-app-body-color {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 36px 12.3px 0;
|
||||
background: #EFEFEF;
|
||||
border-radius: 4px;;
|
||||
}
|
||||
.npm-app-body-color.score-color:nth-child(2),.npm-app-body-color.score-color:nth-child(3) {
|
||||
background: #E26154;
|
||||
}
|
||||
.npm-app-body-color.score-color:nth-child(4),.npm-app-body-color.score-color:nth-child(5) {
|
||||
background: #E5A219;
|
||||
}
|
||||
.npm-app-body-color.score-color:nth-child(6),.npm-app-body-color.score-color:nth-child(7) {
|
||||
background: #749F4D;
|
||||
}
|
||||
.npm-app-body-icon {
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
span {
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.npm-app-right {
|
||||
position: absolute;
|
||||
width: calc(100% - 500px);
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
.app-table {
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 5px 0;
|
||||
.data-column__span {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
height: 306px !important;
|
||||
tr td {
|
||||
padding: 13px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-total{
|
||||
display: flex !important;
|
||||
.data-total-category-icon {
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-right: 12px;
|
||||
color: #717171;
|
||||
}
|
||||
}
|
||||
.data-total-category-value {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
}
|
||||
.data-score {
|
||||
border-radius: 10px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
height: 20px;
|
||||
width: 34px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.data-score.data-score-red {
|
||||
background: #E26154;
|
||||
}
|
||||
.data-score.data-score-yellow {
|
||||
background: #E5A219;
|
||||
}
|
||||
.data-score.data-score-green {
|
||||
background: #749F4D;
|
||||
}
|
||||
}
|
||||
.data-total-trend {
|
||||
display: flex;
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 2px;
|
||||
border-radius: 10px;
|
||||
font-weight:500;
|
||||
}
|
||||
.data-total-trend-black {
|
||||
background-color: rgba(113,113,113,0.12);
|
||||
color: #717171;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
}
|
||||
.data-total-trend-green {
|
||||
background-color: rgba(126,159,84,0.12);
|
||||
width: 52px;
|
||||
height: 20px;
|
||||
color:#7E9F54;
|
||||
}
|
||||
.data-total-trend-red {
|
||||
background-color: rgba(226,97,84,0.12);
|
||||
width: 52px;
|
||||
height: 20px;
|
||||
color:#E26154;
|
||||
.cn-icon-rise1{
|
||||
color: #E44D3E;
|
||||
}
|
||||
}
|
||||
.el-table--group::after,.el-table--border::after, .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table thead {
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,259 @@
|
||||
<template>
|
||||
<div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
|
||||
<div class="npm-app">
|
||||
<div class="npm-app-left">
|
||||
<div class="npm-app-letter">
|
||||
<div v-for="(letter, index) in colorPatchData" :key="index">
|
||||
{{letter.letter}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="npm-app-body">
|
||||
<div class="npm-app-body-patch">
|
||||
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-video"></i></span></div>
|
||||
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[0].score >= index + 1}"></div>
|
||||
</div>
|
||||
<div class="npm-app-body-patch">
|
||||
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-social-network"></i></span></div>
|
||||
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[1].score >= index + 1}"></div>
|
||||
</div>
|
||||
<div class="npm-app-body-patch">
|
||||
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-file-sharing"></i></span></div>
|
||||
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[2].score >= index + 1}"></div>
|
||||
</div>
|
||||
<div class="npm-app-body-patch">
|
||||
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-gaming"></i></span></div>
|
||||
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[3].score >= index + 1}"></div>
|
||||
</div>
|
||||
<div class="npm-app-body-patch">
|
||||
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-email"></i></span></div>
|
||||
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[4].score >= index + 1}"></div>
|
||||
</div>
|
||||
<div class="npm-app-body-patch">
|
||||
<div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-voip"></i></span></div>
|
||||
<div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[5].score >= index + 1}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="npm-app-right">
|
||||
<el-table
|
||||
:id="`tabTable_${index}`"
|
||||
:ref="`dataTable_${index}`"
|
||||
:data="tableData"
|
||||
class="app-table"
|
||||
height="100%"
|
||||
>
|
||||
<template v-for="(item, index) in customTableTitles" :key="index">
|
||||
<el-table-column class="data-column">
|
||||
<template #header>
|
||||
<span class="data-column__span">{{$t(item.label)}}</span>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-total">
|
||||
<template v-if="item.prop === 'category'">
|
||||
<span class="data-total-category-icon"><i :class="scope.row.icon"></i></span>
|
||||
<span class="data-total-category-value">{{$t(scope.row[item.prop])}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'total'">
|
||||
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
|
||||
<div v-if="scope.row.totalTrend === 'up'" class="data-total-trend data-total-trend-red">
|
||||
<i class="cn-icon-rise1 cn-icon"></i> {{parseInt(scope.row.totalTrendValue / scope.row.pTotalTrendValue)}}%
|
||||
</div>
|
||||
<div v-else-if="scope.row.totalTrend === 'down'" class="data-total-trend data-total-trend-green">
|
||||
<i class="cn-icon-decline cn-icon"></i> {{parseInt(scope.row.totalTrendValue / scope.row.pTotalTrendValue)}}%
|
||||
</div>
|
||||
<div v-else class="data-total-trend data-total-trend-black">
|
||||
<i class="cn-icon-constant cn-icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'outbound'">
|
||||
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
|
||||
<div v-if="scope.row.outboundTrend === 'up'" class="data-total-trend data-total-trend-red">
|
||||
<i class="cn-icon-rise1 cn-icon"></i> {{parseInt(scope.row.outboundTrendValue / scope.row.pOutboundTrendValue)}}%
|
||||
</div>
|
||||
<div v-else-if="scope.row.outboundTrend === 'down'" class="data-total-trend data-total-trend-green">
|
||||
<i class="cn-icon-decline cn-icon"></i> {{parseInt(scope.row.outboundTrendValue / scope.row.pOutboundTrendValue)}}%
|
||||
</div>
|
||||
<div v-else class="data-total-trend data-total-trend-black">
|
||||
<i class="cn-icon-constant cn-icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'inbound'">
|
||||
{{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
|
||||
<div v-if="scope.row.inboundTrend === 'up'" class="data-total-trend data-total-trend-red">
|
||||
<i class="cn-icon-rise1 cn-icon"></i> {{parseInt(scope.row.inboundTrendValue / scope.row.pInboundTrendValue)}}%
|
||||
</div>
|
||||
<div v-else-if="scope.row.inboundTrend === 'down'" class="data-total-trend data-total-trend-green">
|
||||
<i class="cn-icon-decline cn-icon"></i> {{parseInt(scope.row.inboundTrendValue / scope.row.pInboundTrendValue)}}%
|
||||
</div>
|
||||
<div v-else class="data-total-trend data-total-trend-black">
|
||||
<i class="cn-icon-constant cn-icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'score'">
|
||||
<div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">
|
||||
{{scope.row.score}}
|
||||
</div>
|
||||
<div v-else-if="scope.row.score <= 4" :class="{'data-score-yellow': scope.row.score <= 4}" class="data-score">
|
||||
{{scope.row.score}}
|
||||
</div>
|
||||
<div v-else-if="scope.row.score <= 6" :class="{'data-score-green': scope.row.score <= 6}" class="data-score">
|
||||
{{scope.row.score}}
|
||||
</div>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
export default {
|
||||
name: 'NpmAppCategoryScore'
|
||||
name: 'NpmAppCategoryScore',
|
||||
data () {
|
||||
return {
|
||||
unitConvert,
|
||||
unitTypes,
|
||||
colorPatchData: [
|
||||
{ letter: '' },
|
||||
{ letter: 'A' },
|
||||
{ letter: 'B' },
|
||||
{ letter: 'C' },
|
||||
{ letter: 'D' },
|
||||
{ letter: 'E' },
|
||||
{ letter: 'F' }
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
category: 'network.video',
|
||||
score: 3,
|
||||
icon: 'cn-icon cn-icon-video',
|
||||
total: 10,
|
||||
totalTrend: 'up',
|
||||
inboundTrend: 'down',
|
||||
outboundTrend: '',
|
||||
totalTrendValue: 6,
|
||||
inboundTrendValue: 2,
|
||||
outboundTrendValue: 3,
|
||||
pTotalTrendValue: 5,
|
||||
pInboundTrendValue: 3,
|
||||
pOutboundTrendValue: 6,
|
||||
inbound: 0.1,
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
category: 'network.socialNetwork',
|
||||
score: 2,
|
||||
icon: 'cn-icon cn-icon-social-network',
|
||||
total: 10,
|
||||
totalTrend: 'down',
|
||||
inboundTrend: 'down',
|
||||
outboundTrend: 'down',
|
||||
totalTrendValue: 6,
|
||||
inboundTrendValue: 2,
|
||||
outboundTrendValue: 3,
|
||||
pTotalTrendValue: 5,
|
||||
pInboundTrendValue: 3,
|
||||
pOutboundTrendValue: 6,
|
||||
inbound: 0.1,
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
category: 'network.fileSharing',
|
||||
score: 1,
|
||||
icon: 'cn-icon cn-icon-file-sharing',
|
||||
total: 10,
|
||||
totalTrend: '',
|
||||
inboundTrend: '',
|
||||
totalTrendValue: 6,
|
||||
inboundTrendValue: 2,
|
||||
outboundTrendValue: 3,
|
||||
pTotalTrendValue: 5,
|
||||
pInboundTrendValue: 3,
|
||||
pOutboundTrendValue: 6,
|
||||
inbound: 0.1,
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
category: 'network.gaming',
|
||||
score: 4,
|
||||
icon: 'cn-icon cn-icon-gaming',
|
||||
total: 10,
|
||||
totalTrend: 'up',
|
||||
inboundTrend: 'up',
|
||||
outboundTrend: '',
|
||||
totalTrendValue: 6,
|
||||
inboundTrendValue: 2,
|
||||
outboundTrendValue: 3,
|
||||
pTotalTrendValue: 5,
|
||||
pInboundTrendValue: 3,
|
||||
pOutboundTrendValue: 6,
|
||||
inbound: 0.1,
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
category: 'network.email',
|
||||
score: 6,
|
||||
icon: 'cn-icon cn-icon-email',
|
||||
total: 10,
|
||||
totalTrend: 'down',
|
||||
inboundTrend: 'up',
|
||||
outboundTrend: 'down',
|
||||
totalTrendValue: 6,
|
||||
inboundTrendValue: 2,
|
||||
outboundTrendValue: 3,
|
||||
pTotalTrendValue: 5,
|
||||
pInboundTrendValue: 3,
|
||||
pOutboundTrendValue: 6,
|
||||
inbound: 0.1,
|
||||
outbound: 0.89
|
||||
},
|
||||
{
|
||||
category: 'network.voip',
|
||||
score: 5,
|
||||
icon: 'cn-icon cn-icon-voip',
|
||||
total: 10,
|
||||
totalTrend: 'down',
|
||||
inboundTrend: '',
|
||||
outboundTrend: 'down',
|
||||
totalTrendValue: 6,
|
||||
inboundTrendValue: 2,
|
||||
outboundTrendValue: 3,
|
||||
pTotalTrendValue: 5,
|
||||
pInboundTrendValue: 3,
|
||||
pOutboundTrendValue: 6,
|
||||
inbound: 0.1,
|
||||
outbound: 0.89
|
||||
}
|
||||
],
|
||||
customTableTitles: [
|
||||
{ label: 'network.category', prop: 'category' },
|
||||
{ label: 'network.score', prop: 'score' },
|
||||
{ label: 'network.total', prop: 'total' },
|
||||
{ label: 'network.outbound', prop: 'outbound' },
|
||||
{ label: 'network.inbound', prop: 'inbound' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tableCellStyle ({ row, column, rowIndex, columnIndex }) {
|
||||
let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
|
||||
if (rowIndex === this.tableData.length - 1) {
|
||||
style = style + 'border-bottom:0px !important;'
|
||||
}
|
||||
if (columnIndex === 0) {
|
||||
style = style + 'color:#046ECA;'
|
||||
}
|
||||
return style
|
||||
},
|
||||
tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
|
||||
return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user