nezha-nezha-fronted/nezha-fronted/src/components/chart/chartHeader.vue

<template>
  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
    <div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div>
    <div class="chart-header__title" v-else @click="groupShow"> > {{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,
    isGroup: {
      type: Boolean,
      default: false
    },
    error: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dropdownMenuShow: false,
      errorText: ''
    }
  },
  methods: {
    showFullscreen () {
      this.$emit('showFullscreen', true)
    },
    refreshChart () {
      this.$emit('refresh')
    },
    editChart () {
      // this.$emit('edit-chart', this.chartInfo)
      this.$store.dispatch('dispatchEditChart', {
        chart: this.chartInfo,
        type: 'edit'
      })
    },
    removeChart () {
      this.$store.dispatch('dispatchDelChart', {
        chart: this.chartInfo,
        type: 'delete'
      })
    },
    duplicate () {
      this.$store.dispatch('dispatchEditChart', {
        chart: this.chartInfo,
        type: 'duplicate'
      })
    },
    clickos () {
      this.dropdownMenuShow = false
    },
    groupShow () {
      this.$emit('groupShow', !this.chartInfo.param.collapse)
    }
  }
}
</script>