data-marketing-platform/src/views/home/echarts/custom-panel.vue

<template>
  <el-card shadow="hover">
    <div class="panel-top">
      <div class="panel-name">{{prop.title}}</div>
      <div :class="['panel-refresh', { 'panel-refresh-rotate': roading }]"  @click="handleRefresh">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16.7167 6.66667C15.4895 4.19712 12.9411 2.5 9.99637 2.5C7.05158 2.5 4.56062 4.19712 3.33337 6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
          <path d="M3.33337 3.33334V6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
          <path d="M6.15845 6.66666H3.33337" stroke="#ADBFD7" stroke-linecap="round"/>
          <path d="M3.33337 13.3333C4.56062 15.8029 7.109 17.5 10.0538 17.5C12.9985 17.5 15.4895 15.8029 16.7167 13.3333" stroke="#ADBFD7" stroke-linecap="round"/>
          <path d="M16.7167 16.6667V13.3333" stroke="#ADBFD7" stroke-linecap="round"/>
          <path d="M13.8916 13.3333H16.7167" stroke="#ADBFD7" stroke-linecap="round"/>
        </svg>
      </div>
    </div>
    <slot></slot>
  </el-card>
</template>

<script setup lang="ts" name="panel-top">
const prop = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['refresh']);
const roading = ref(false);

const handleRefresh = () => {
  if (roading.value) return;
  roading.value = true;
  setTimeout(() => {
    roading.value = false;
  }, 1000);
  emit('refresh');
};
</script>

<style scoped lang="scss">
.panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-name {
  line-height: 22px;
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-size: 18px;
  color: rgba(18, 18, 18, 1);
  position: relative;
  padding-left: 12px;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 14px;
    background-color: rgb(22, 122, 240, 1);
  }
}

.panel-refresh-rotate svg {
  animation: rotate 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    transform-origin: center center;
  }
  100% {
    transform: rotate(-360deg);
    transform-origin: center center;
  }
}
</style>