fix: alertRule导入导出按钮看不见的问题

This commit is contained in:
chenjinsong
2021-05-12 11:28:51 +08:00
parent 273af49d81
commit 846fac9676
2 changed files with 66 additions and 77 deletions

View File

@@ -1,70 +1,66 @@
<template> <template>
<div> <el-dialog
<el-dialog :title="$t('guide.title')"
:title="$t('guide.title')" :visible.sync="visible"
:visible.sync="visible" custom-class="guild-pop"
custom-class="guild-pop" width="1000px"
width="1000px" >
@closed="dialogClosed" <div class="guide-list">
@open="dialogOpened" <div ref="guideShadow" class="guide-shadow"></div>
> <div v-for="(guide, index) in guideList" :key="index" :class="{'guide-item--active': index === activeIndex}" class="guide-item"
<div class="guide-list"> @mouseenter="enter(index)" @mouseleave="leave(index)"
<div ref="guideShadow" class="guide-shadow"></div> >
<div v-for="(guide, index) in guideList" :key="index" :class="{'guide-item--active': index === activeIndex}" class="guide-item" <div class="item__title">{{guide.title}}</div>
@mouseenter="enter(index)" @mouseleave="leave(index)" <div class="item__icon" @click="jump(guide.route)"><i :class="guide.icon"></i></div>
> </div>
<div class="item__title">{{guide.title}}</div> </div>
<div class="item__icon" @click="jump(guide.route)"><i :class="guide.icon"></i></div> <div class="guide-desc">
<template v-if="activeIndex === 0">
<div class="desc-text">{{$t('guide.dcTip')}}</div>
<div class="guide__btn-group">
<button class="guide__btn" type="button" @click="jumpAndOpen('dc')">{{$t('guide.addDc')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('cabinet')">{{$t('guide.addCabinet')}}</button>
</div> </div>
</div> </template>
<div class="guide-desc"> <template v-if="activeIndex === 1">
<template v-if="activeIndex === 0"> <div class="desc-text">{{$t('guide.agentTip')}}</div>
<div class="desc-text">{{$t('guide.dcTip')}}</div> <div class="guide__btn-group">
<div class="guide__btn-group"> <button class="guide__btn" type="button" @click="jumpAndOpen('agent')">{{$t('guide.addAgent')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('dc')">{{$t('guide.addDc')}}</button> <button class="guide__btn" type="button" @click="downloadAgent">{{$t('guide.downloadAgent')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('cabinet')">{{$t('guide.addCabinet')}}</button> </div>
</div> </template>
</template> <template v-if="activeIndex === 2">
<template v-if="activeIndex === 1"> <div class="desc-text">{{$t('guide.assetTip')}}</div>
<div class="desc-text">{{$t('guide.agentTip')}}</div> <div class="guide__btn-group">
<div class="guide__btn-group"> <button class="guide__btn" type="button" @click="jumpAndOpen('asset')">{{$t('guide.addAsset')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('agent')">{{$t('guide.addAgent')}}</button> <button class="guide__btn" type="button" @click="jumpAndOpen('importAsset')">{{$t('guide.importAsset')}}</button>
<button class="guide__btn" type="button" @click="downloadAgent">{{$t('guide.downloadAgent')}}</button> <button class="guide__btn" type="button" @click="openTerminal">{{$t('guide.webTerminal')}}</button>
</div> </div>
</template> </template>
<template v-if="activeIndex === 2"> <template v-if="activeIndex === 3">
<div class="desc-text">{{$t('guide.assetTip')}}</div> <div class="desc-text">{{$t('guide.monitorTip')}}</div>
<div class="guide__btn-group"> <div class="guide__btn-group">
<button class="guide__btn" type="button" @click="jumpAndOpen('asset')">{{$t('guide.addAsset')}}</button> <button class="guide__btn" type="button" @click="jumpAndOpen('project')">{{$t('guide.addProject')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('importAsset')">{{$t('guide.importAsset')}}</button> <button class="guide__btn" type="button" @click="jumpAndOpen('module')">{{$t('guide.addModule')}}</button>
<button class="guide__btn" type="button" @click="openTerminal">{{$t('guide.webTerminal')}}</button> <button class="guide__btn" type="button" @click="jumpAndOpen('endpoint')">{{$t('guide.addEndpoint')}}</button>
</div> <button class="guide__btn" type="button" @click="jumpAndOpen('importEndpoint')">{{$t('guide.importEndpoint')}}</button>
</template> </div>
<template v-if="activeIndex === 3"> </template>
<div class="desc-text">{{$t('guide.monitorTip')}}</div> <template v-if="activeIndex === 4">
<div class="guide__btn-group"> <div class="desc-text">{{$t('guide.visualizationTip')}}</div>
<button class="guide__btn" type="button" @click="jumpAndOpen('project')">{{$t('guide.addProject')}}</button> <div class="guide__btn-group">
<button class="guide__btn" type="button" @click="jumpAndOpen('module')">{{$t('guide.addModule')}}</button> <button class="guide__btn" type="button" @click="jumpAndOpen('panel')">{{$t('guide.addPanel')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('endpoint')">{{$t('guide.addEndpoint')}}</button> <button class="guide__btn" type="button" @click="jumpAndOpen('chart')">{{$t('guide.addChart')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('importEndpoint')">{{$t('guide.importEndpoint')}}</button> </div>
</div> </template>
</template> <template v-if="activeIndex === 5">
<template v-if="activeIndex === 4"> <div class="desc-text">{{$t('guide.alertTip')}}</div>
<div class="desc-text">{{$t('guide.visualizationTip')}}</div> <div class="guide__btn-group">
<div class="guide__btn-group"> <button class="guide__btn" type="button" @click="jumpAndOpen('alertRule')">{{$t('guide.addAlertRule')}}</button>
<button class="guide__btn" type="button" @click="jumpAndOpen('panel')">{{$t('guide.addPanel')}}</button> </div>
<button class="guide__btn" type="button" @click="jumpAndOpen('chart')">{{$t('guide.addChart')}}</button> </template>
</div> </div>
</template> </el-dialog>
<template v-if="activeIndex === 5">
<div class="desc-text">{{$t('guide.alertTip')}}</div>
<div class="guide__btn-group">
<button class="guide__btn" type="button" @click="jumpAndOpen('alertRule')">{{$t('guide.addAlertRule')}}</button>
</div>
</template>
</div>
</el-dialog>
</div>
</template> </template>
<script> <script>
@@ -122,14 +118,6 @@ export default {
} }
}, },
methods: { methods: {
dialogOpened () {
if (this.$refs.changePinForm) {
this.$refs.changePinForm.resetFields()
}
},
dialogClosed () {
this.$emit('dialogClosed')
},
close () { close () {
this.visible = false this.visible = false
}, },
@@ -142,10 +130,10 @@ export default {
this.interval && clearInterval(this.interval) this.interval && clearInterval(this.interval)
}, },
downloadAgent () { downloadAgent () {
// TODO
}, },
openTerminal () { openTerminal () {
// TODO
}, },
jump (route) { jump (route) {
this.visible = false this.visible = false

View File

@@ -12,15 +12,16 @@
<template v-slot:top-tool-right> <template v-slot:top-tool-right>
<export-excel <export-excel
id="alert-rule" id="alert-rule"
:permissions="{import: 'alertRule_add'}"
:params="searchLabel" :params="searchLabel"
:permissions="{import: 'rule_import', export: 'rule_export'}" class="top-tool-export margin-r-10"
export-file-name="AlertRule" export-file-name="AlertRule"
export-url="/alert/rule/export" export-url="/alert/rule/export"
import-url="/alert/rule/import" import-url="/alert/rule/import"
@afterImport="getTableData" @afterImport="getTableData"
> >
<template slot="optionZone"> <template slot="optionZone">
<button id="alert-add" v-has="'alertRule_add'" :title="$t('overall.createAlertRule')" class="top-tool-btn margin-r-10" <button id="alert-add" v-has="'alertRule_add'" :title="$t('overall.createAlertRule')" class="top-tool-btn"
@click="add"> @click="add">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
</button> </button>