gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：添加 hover显示具体数值的功能

Browse Source
This commit is contained in:
zhangyu
2020-12-07 18:04:05 +08:00
parent 4f092c2bf7
commit b94bd65e94
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -26,12 +26,14 @@
<div class="content-col-content clickable" v-loading="assetLoading" @click="jumpTo('asset')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
<div class="content-num-box">
<el-tooltip class="item" effect="light" :content="assetData ? assetData.totalStat.total : ''" placement="top">
<div class="content-col-content-num">
<vue-countup :duration="1" :start-value="0" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat"
:decimals="(assetData ? assetData.totalStat.total : 0) < 1000 ? 0 : 1"></vue-countup>
<span v-if="(assetData ? assetData.totalStat.total : 0) > 1000 " class="over-num">+</span>
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
</div>
</el-tooltip>
<div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
</div>
</div>
@@ -40,11 +42,13 @@
<div class="content-col-content" v-loading="projectLoading">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
<div class="content-num-box">
<el-tooltip class="item" effect="light" :content="projectData ? projectData.projectStat.length : ''" placement="top">
<div class="content-col-content-num">
<vue-countup :duration="1" :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
<span v-if="(projectData ? projectData.projectStat.length : 0) > 1000 " class="over-num">+</span>
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
</div>
</el-tooltip>
<div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
</div>
</div>
@@ -53,11 +57,13 @@
<div class="content-col-content" v-loading="moduleLoading">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
<div class="content-num-box">
<el-tooltip class="item" effect="light" :content="moduleData ? moduleData.moduleStat.length : ''" placement="top">
<div class="content-col-content-num">
<vue-countup :duration="1" :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
<span v-if="(moduleData ? moduleData.moduleStat.length : 0) > 1000 " class="over-num">+</span>
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
</div>
</el-tooltip>
<div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
</div>
</div>
@@ -66,11 +72,13 @@
<div class="content-col-content" v-loading="endpointLoading">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
<div class="content-num-box">
<el-tooltip class="item" effect="light" :content="endpointData ? endpointData.total : ''" placement="top">
<div class="content-col-content-num">
<vue-countup :duration="1" :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
<span v-if="(endpointData ? endpointData.total : 0) > 1000 " class="over-num">+</span>
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
</div>
</el-tooltip>
<div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
</div>
</div>
@@ -79,11 +87,13 @@
<div class="content-col-content clickable" v-loading="alertMessageLoading" @click="jumpTo('alertList')">
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
<div class="content-num-box">
<el-tooltip class="item" effect="light" :content="alertMessageData ? alertMessageData.alertMessageTotal : ''" placement="top">
<div class="content-col-content-num">
<vue-countup :duration="1" :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup>
<span v-if="(alertMessageData ? alertMessageData.alertMessageTotal : 0) > 1000 " class="over-num">+</span>
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
</div>
</el-tooltip>
<div class="content-col-content-title">{{$t("overall.alert")}}</div>
</div>
<div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>