82 lines
2.8 KiB
Vue
82 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div class="chart-header">
|
||
|
|
<div class="chart-header__title">{{chartInfo.name}}</div>
|
||
|
|
<div class="chart-header__tools">
|
||
|
|
<span v-if="chartInfo.remark" class="chart-header__tool">
|
||
|
|
<el-tooltip :content="chartInfo.remark" effect="light" placement="top">
|
||
|
|
<i class="nz-icon nz-icon-info-normal tool__icon"></i>
|
||
|
|
</el-tooltip>
|
||
|
|
</span>
|
||
|
|
<span class="chart-header__tool" @click="refreshChart">
|
||
|
|
<el-tooltip :content="$t('dashboard.refresh')" effect="light" placement="top">
|
||
|
|
<i class="nz-icon nz-icon-replay tool__icon"></i>
|
||
|
|
</el-tooltip>
|
||
|
|
</span>
|
||
|
|
<span v-if="from !== this.$CONSTANTS.fromRoute.chartTemp" class="chart-header__tool" @click="showFullScreen">
|
||
|
|
<el-tooltip :content="$t('dashboard.screen')" effect="light" placement="top">
|
||
|
|
<i class="nz-icon nz-icon-maxview tool__icon"></i>
|
||
|
|
</el-tooltip>
|
||
|
|
</span>
|
||
|
|
<span class="chart-header__tool">
|
||
|
|
<el-dropdown v-clickoutside="clickos" trigger="click">
|
||
|
|
<i class="el-icon-more tool__icon" @click.stop="dropdownMenuShow = !dropdownMenuShow"></i>
|
||
|
|
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||
|
|
<ul v-show="dropdownMenuShow" slot="dropdown" class="el-dropdown-menu nz-chart-dropdown">
|
||
|
|
<li class="el-dropdown-menu__item" @click="editChart">
|
||
|
|
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i>
|
||
|
|
<span>{{$t('dashboard.edit')}}</span>
|
||
|
|
</li>
|
||
|
|
<li v-has="'panel_chart_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||
|
|
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>
|
||
|
|
<span>{{$t('dashboard.delete')}}</span>
|
||
|
|
</li>
|
||
|
|
<li v-has="'panel_chart_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||
|
|
<i class="el-icon-copy-document" style="font-size: 16px;"></i>
|
||
|
|
<span>{{$t('dashboard.duplicate')}}</span>
|
||
|
|
</li>
|
||
|
|
<li v-if="from !== this.$CONSTANTS.fromRoute.chartTemp && chartInfo.pid" v-has="'panel_chart_edit'" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||
|
|
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>
|
||
|
|
<span>{{$t('overall.syncChart')}}</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</el-dropdown>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'chartHeader',
|
||
|
|
props: {
|
||
|
|
chartInfo: Object,
|
||
|
|
from: String
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
dropdownMenuShow: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showFullScreen () {
|
||
|
|
|
||
|
|
},
|
||
|
|
refreshChart () {
|
||
|
|
|
||
|
|
},
|
||
|
|
editChart () {
|
||
|
|
|
||
|
|
},
|
||
|
|
removeChart () {
|
||
|
|
|
||
|
|
},
|
||
|
|
duplicate () {
|
||
|
|
|
||
|
|
},
|
||
|
|
clickos () {
|
||
|
|
this.dropdownMenuShow = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|