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

fix: 修复流量折线统计图表，数据为空时为隐藏问题

Browse Source
This commit is contained in:
@changcode
2022-09-21 16:42:51 +08:00
parent 923a526b3a
commit 93b256c223
2 changed files with 108 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
View File

@@ -1,64 +1,66 @@
<template> <template>
<div class="line network dns-traffic-line"> <div class="line network dns-traffic-line">
<chart-no-data v-if="isNoData"></chart-no-data> <chart-no-data v-if="isNoData"></chart-no-data>
<div class="line-header"> <template v-else>
<div class="line-header-left"> <div class="line-header">
<div class="line-value-active" v-if="lineTab"></div> <div class="line-header-left">
<div class="line-value"> <div class="line-value-active" v-if="lineTab"></div>
<div class="line-value-mpackets" <div class="line-value">
v-show="item.show" <div class="line-value-mpackets"
:class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}" v-show="item.show"
v-for="(item, index) in mpackets" :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
:key="index" v-for="(item, index) in mpackets"
@mouseenter="mouseenter(item)" :key="index"
@mouseleave="mouseleave(item)" @mouseenter="mouseenter(item)"
@click="activeChange(item, index)"> @mouseleave="mouseleave(item)"
<div class="line-value-mpackets-name"> @click="activeChange(item, index)">
<div :class="item.class"></div> <div class="line-value-mpackets-name">
<div class="mpackets-name">{{$t(item.name)}}</div> <div :class="item.class"></div>
</div> <div class="mpackets-name">{{$t(item.name)}}</div>
<div class="line-value-unit"> </div>
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span> <div class="line-value-unit">
<span class="line-value-unit-number2"> <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
<span class="line-value-unit-number2">
<span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span> <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
</span> </span>
</div>
</div>
</div>
</div>
<div class="line-select line-header-right">
<div class="line-select-metric">
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineMetric"
popper-class="common-select"
:popper-append-to-body="false"
@change="metricSelectChange"
>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="line-select-reference-line">
<span>{{$t('network.referenceLine')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineRefer"
:disabled="!lineTab"
popper-class="common-select"
:popper-append-to-body="false"
@change="referenceSelectChange"
>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="line-select line-header-right"> <div class="chart-drawing" v-show="showMarkLine" id="dnsLineChart"></div>
<div class="line-select-metric"> </template>
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineMetric"
popper-class="common-select"
:popper-append-to-body="false"
@change="metricSelectChange"
>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="line-select-reference-line">
<span>{{$t('network.referenceLine')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineRefer"
:disabled="!lineTab"
popper-class="common-select"
:popper-append-to-body="false"
@change="referenceSelectChange"
>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
</div>
</div>
<div class="chart-drawing" v-show="showMarkLine" id="dnsLineChart"></div>
</div> </div>
</template> </template>

106
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -1,64 +1,66 @@
<template> <template>
<div class="line network"> <div class="line network">
<chart-no-data v-if="isNoData"></chart-no-data> <chart-no-data v-if="isNoData"></chart-no-data>
<div class="line-header"> <template v-else>
<div class="line-header-left"> <div class="line-header">
<div class="line-value-active" v-if="lineTab"></div> <div class="line-header-left">
<div class="line-value"> <div class="line-value-active" v-if="lineTab"></div>
<div class="line-value-mpackets" <div class="line-value">
v-show="item.show" <div class="line-value-mpackets"
:class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}" v-show="item.show"
v-for="(item, index) in mpackets" :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
:key="index" v-for="(item, index) in mpackets"
@mouseenter="mouseenter(item)" :key="index"
@mouseleave="mouseleave(item)" @mouseenter="mouseenter(item)"
@click="activeChange(item, index)"> @mouseleave="mouseleave(item)"
<div class="line-value-mpackets-name"> @click="activeChange(item, index)">
<div :class="item.class"></div> <div class="line-value-mpackets-name">
<div class="mpackets-name">{{$t(item.name)}}</div> <div :class="item.class"></div>
</div> <div class="mpackets-name">{{$t(item.name)}}</div>
<div class="line-value-unit"> </div>
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span> <div class="line-value-unit">
<span class="line-value-unit-number2"> <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
<span class="line-value-unit-number2">
<span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span> <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
</span> </span>
</div>
</div>
</div>
</div>
<div class="line-select line-header-right">
<div class="line-select-metric">
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineMetric"
popper-class="common-select"
:popper-append-to-body="false"
@change="metricSelectChange"
>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="line-select-reference-line">
<span>{{$t('network.referenceLine')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineRefer"
:disabled="!lineTab"
popper-class="common-select"
:popper-append-to-body="false"
@change="referenceSelectChange"
>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="line-select line-header-right"> <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
<div class="line-select-metric"> </template>
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineMetric"
popper-class="common-select"
:popper-append-to-body="false"
@change="metricSelectChange"
>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
<div class="line-select-reference-line">
<span>{{$t('network.referenceLine')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="lineRefer"
:disabled="!lineTab"
popper-class="common-select"
:popper-append-to-body="false"
@change="referenceSelectChange"
>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
</div>
</div>
<div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
</div> </div>
</template> </template>