ocr-web/src/components/DataHeader/index.vue

<script lang="ts" setup>
import { defineProps, onMounted, ref } from "vue";
import { gettaskToolsCount } from "@/api/home/main";

defineProps({
  hasColor: {
    type: Boolean,
    default: () => false,
  },
});

const data = ref([
  {
    link: "count",
    title: "任务总数",
    count: 0,
  },
  {
    link: "wait",
    title: "待审批",
    count: 0,
  },
  {
    link: "done",
    title: "已审批",
    count: 0,
  },
  {
    link: "resolve",
    title: "通过",
    count: 0,
    color: "#03c984",
  },
  {
    link: "reject",
    title: "不通过",
    count: 0,
    color: "#ff8b8b",
  },
  {
    link: "reimg",
    title: "图片重复数",
    count: 0,
  },
  {
    link: "breakcount",
    title: "小结重复数",
    count: 0,
  },
]);

function initRem() {
  const designWidth = 1440;
  const rempPx = 16;
  const scale = window.innerWidth / designWidth;
  document.documentElement.style.fontSize = `${scale * rempPx}px`;
}
onMounted(() => {
  initRem();
  getData();
});
async function getData() {
  const { data } = await gettaskToolsCount();
  if (data) {
    const {
      total,
      treat,
      alreadyApprove,
      repeatedNodules,
      repeat,
      approvedCount,
      notGoCount,
    } = data;
    data.value = [
      {
        link: "count",
        title: "任务总数",
        count: total,
      },
      {
        link: "wait",
        title: "待审批",
        count: treat,
      },
      {
        link: "done",
        title: "已审批",
        count: alreadyApprove,
      },
      {
        link: "resolve",
        title: "通过",
        count: approvedCount,
        color: "#03c984",
      },
      {
        link: "reject",
        title: "不通过",
        count: notGoCount,
        color: "#ff8b8b",
      },
      {
        link: "reimg",
        title: "图片重复数",
        count: repeat,
      },
      {
        link: "breakcount",
        title: "小结重复数",
        count: repeatedNodules,
      },
    ];
  }
}
</script>
1
<template>
  <div class="header_wrap" :style="hasColor ? '' : 'margin-top: 7.375rem;'">
    <div v-for="(item, index) in data" :key="index" class="header_box">
      <div class="header_item">
        <SvgIcon :name="item.link" :style="index == 0 ? 'margin-left:0.5rem' : ''" />
        <div class="data_wrap">
          <div class="data_title" :style="hasColor ? `color:${item.color || ''}` : ''">
            {{ item.count }}
          </div>
          <div class="data_content">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div
        class="line"
        :style="
          hasColor
            ? 'margin-left:2.5rem;margin-right:2.0625rem'
            : 'margin-left:1.25rem;margin-right:0.8125rem'
        "
      />
    </div>
    <SvgIcon size="14px" style="cursor: pointer" name="setting" class="settingSvg" />
  </div>
</template>

<style scoped lang="less">
.header_wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 3.125rem;
  background: #f5f7f9;
  margin-bottom: 1rem;
  // 180-62 header
  padding-left: 2.125rem;
  .header_box {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    min-width: 10%;
    .header_item {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      svg {
        width: 2.75rem !important;
        height: 2.75rem !important;
      }
      .data_wrap {
        margin-left: 0.75rem;
        .data_title {
          font-size: 1.125rem;
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
          font-weight: 900;
          text-align: left;
          color: #202020;
          line-height: 1.4375rem;
          text-align: center;
          white-space: nowrap;
        }
        .data_content {
          opacity: 0.6;
          font-size: 0.75rem;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 500;
          text-align: center;
          color: #202020;
          line-height: 1rem;
          text-align: center;
          white-space: nowrap;
        }
      }
    }
  }
}
.settingSvg {
  width: 1rem !important;
  height: 1rem !important;
}
.line {
  width: 0.0625rem;
  height: 1.25rem;
  background: #e8e8e8;
}
</style>