feat: chart添加group 并修改样式

This commit is contained in:
zhangyu
2021-04-07 19:18:22 +08:00
parent 37491595bb
commit 0a41e3247d
13 changed files with 215 additions and 484 deletions

View File

@@ -36,20 +36,24 @@
</span>
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze "></i></span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
<i class="nz-icon nz-icon-replay"></i>
</span>
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
<i class="nz-icon nz-icon-maxview"></i>
</span>
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
</span>
</span>
<ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow" v-show="dropdownMenuShow" >
<li v-show="!isExplore" @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`" v-show="!isExplore">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`" v-show="!isExplore">
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
<li @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`" v-show="!isExplore">
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
@@ -1470,31 +1474,7 @@ export default {
},
duplicate () {
this.dropdownMenuShow = false
this.$confirm(this.$t('tip.confirmDuplicate'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'info'
}).then(() => {
const param = { id: this.data.id }
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
if (response.code === 200) {
this.$message({
duration: 2000,
type: 'success',
message: this.$t('tip.duplicateSuccess')
})
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
} else {
if (response.msg) {
this.$message.error(response.msg)
} else if (response.error) {
this.$message.error(response.error)
} else {
this.$message.error(response)
}
}
})
})
this.$emit('on-duplicate-chart-block', this.data.id)
},
dateChange (time) {
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')