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

NEZ-2391 feat：dashboard template页面开发

Browse Source
This commit is contained in:
18317449825
2022-11-22 19:16:59 +08:00
parent 654a0d75a5
commit 1c2fc831aa
13 changed files with 606 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -2,7 +2,10 @@
<div v-clickoutside="{obj:editPanel,func:clickOutside}" class="right-box right-box-panel">
<!-- begin--标题-->
<div class="right-box__header">
<div class="header__title">{{editPanel.id ? ($t("dashboard.panel.editPanelTitle")) : $t("dashboard.panel.createPanelTitle")}}</div>
<div class="header__title" v-if="from !== 'dashboardTemp'">{{editPanel.id ? $t("dashboard.panel.editPanelTitle") : $t("dashboard.panel.createPanelTitle")}}</div>
<div class="header__title" v-if="from === 'dashboardTemp'">{{editPanel.id ? $t("dashboard.panel.editPanelTempTitle") : $t("dashboard.panel.createPanelTempTitle")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editPanel, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
</div>
@@ -11,9 +14,21 @@
<div class="right-box__container">
<div class="container__form">
<el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
<!-- name -->
<el-form-item :label='$t("overall.name")' prop="name">
<el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small" :disabled="isBottom"></el-input>
</el-form-item>
<!--varType-->
<el-form-item v-if="from==='dashboardTemp'" :label="$t('dashboard.panel.chartForm.varType')" clearable class="item-receivers" prop="varType">
<el-select v-model="editPanel.varType" :disabled="!!editPanel.id" clearable popper-class="right-box-select-top prevent-clickoutside" placeholder="" size="small">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!--remark-->
<el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
<el-input
@@ -27,15 +42,15 @@
<!-- chartShare -->
<el-form-item :label="$t('dashboard.panel.chartTooltip')" class="item-receivers" prop="chartShare">
<el-select v-model="editPanel.param.chartShare" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-select v-model="editPanel.param.chartShare" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option value="none" label="Default">
<span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
<span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
</el-option>
<el-option value="crosshair" label="Share crosshair">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
<el-option value="crosshair" label="Share crosshair">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
</el-option>
<el-option value="tooltip" label="Share tooltip">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
</el-option>
</el-select>
<div class="item-receivers-text">{{$t('dashboard.panel.chartTooltipText')}}</div>
@@ -360,7 +375,8 @@ export default {
panelType: {
type: String,
default: 'dashboard'
}
},
from: { type: String }
},
mixins: [editRigthBox],
data () {
@@ -447,6 +463,11 @@ export default {
{ name: 'label_values(metric, label)', description: this.$t('dashboard.panel.label_values(metric, label)') },
{ name: 'metrics(metric)', description: this.$t('dashboard.panel.metrics(metric)') },
{ name: 'query_result(query)', description: this.$t('dashboard.panel.query_result(query)') }
],
varTypeArr: [
{ name: this.$t('project.topology.none'), id: 0 },
{ name: this.$t('asset.asset'), id: 1 },
{ name: this.$t('asset.endpoint'), id: 2 }
]
}
},