sl-sfy-safety/src/views/dashboard/home/components/ClickShow.vue

<template>
  <div>
    <div class="click-header">
      <div class="click-title">点击量</div>
      <el-tag type="success" class="click-time">日</el-tag>
    </div>
    <el-divider />
    <div>
      <div class="click-number">{{ clickData?.todayClicks }}</div>
      <div class="click-compare">
        <div class="click-detail">日同比</div>
        <div>{{ ratio === undefined? '':ratio + '%' }}</div>
        <el-icon v-if="Number(ratio) > 0" class="ratio-ico-up"><Top /></el-icon>
        <el-icon v-else-if="Number(ratio) < 0" class="ratio-ico-down"><Bottom /></el-icon>
      </div>
    </div>
    <el-divider />
    <div class="click-total">
      <div class="click-detail">总点击量</div>
      <div style="margin-left: 22px">{{ clickData?.allClicks }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Top, Bottom } from '@element-plus/icons-vue';
  import { computed, onMounted } from 'vue';
  import usePanel from '../hooks/usePanel';

  const usePanelInfo = usePanel();
  const { getPanelUserRecord, clickData } = usePanelInfo;
  onMounted(() => {
    getPanelUserRecord();
  });
  const ratio = computed(() => {
    if (!clickData.value?.yesterdayClicks) {
      return undefined;
    }
    if (clickData.value?.yesterdayClicks! === 0 && clickData.value?.todayClicks! !== 0) {
      return 100;
    } else if (clickData.value?.yesterdayClicks! === 0 && clickData.value?.todayClicks! === 0) {
      return 0;
    } else {
      return Number(
        ((clickData.value?.todayClicks! - clickData.value?.yesterdayClicks!) * 100) /
          clickData.value?.yesterdayClicks!,
      ).toFixed(2);
    }
  });
</script>

<style scoped>
  .click-header {
    display: flex;
    justify-content: space-between;
  }

  .click-title {
    font-size: 16px;
    margin-left: 24px;
    margin-top: 17px;
    margin-bottom: 10px;
  }
  .click-time {
    margin-top: 18px;
    margin-right: 23px;
    font-size: 12px;
  }

  .el-divider--horizontal {
    margin: 0px;
  }

  .click-number {
    margin-top: 8px;
    margin-left: 24px;
    margin-bottom: 20px;
    font-size: 30px;
  }

  .click-compare {
    margin-left: 24px;
    margin-bottom: 20px;
    display: flex;
  }

  .click-detail {
    font-size: 14px;
    margin-right: 8px;
    color: rgba(0, 0, 0, 0.65);
  }

  .ratio-ico-up {
    color: red;
    margin-top: 4px;
  }

  .ratio-ico-right {
    margin-top: 4px;
  }

  .ratio-ico-down {
    color: green;
    margin-top: 3px;
  }

  .click-total {
    margin-left: 24px;
    margin-top: 8px;
    display: flex;
  }
</style>