ads_web/src/components/dataCompare/index.vue

<template>
  <p>{{ props.value === null || props.value === 0 ? '--' : props.value }}</p>
  <el-popover
    effect="dark"
    :width="260">
    <template #reference>
      <p :class="colorClass" v-show="props.showCompare">
        <template v-if="props.gapVal">
          <el-icon style="display: inline-block; padding-top: 2px">
            <Top v-if="props.gapVal > 0"/>
            <Bottom v-if="props.gapVal < 0"/>
          </el-icon>
        </template>
        <span>{{ props.gapVal ? props.gapVal.toFixed(2) + '%' : '--'}}</span>
      </p>
    </template>
    <p>对比周期：{{ compareDate[0] }} ~ {{ compareDate[1] }}</p>
    <p>对比值：{{ props.prevVal }}</p>
  </el-popover>
</template>

<script lang="ts" setup>
import { ref, computed, Prop } from 'vue'
import { getCompareDate } from '/@/views/adManage/utils/tools.js'

interface Props {
  field: string,
  value: number,
  prevVal: number,
  gapVal: number,
  dateRange: string[],
  showCompare: boolean
}

const props = defineProps<Props>()
const compareDate = computed(() => {
  return getCompareDate(props.dateRange)
})

const colorClass = computed(() => {
  if (props.gapVal) {
    return props.gapVal > 0 ? 'green' :'red'
  }
  return ''
})

</script>

<style scoped>
.green {
  color: rgb(24, 172, 54)
}
.red {
  color: red;
}
</style>