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

<script lang="ts" setup>
import { defineProps, onBeforeMount, onMounted, ref, watch } from 'vue'
import { gettaskToolsCount } from '@/api/home/main'
import { useDataHeaderStore } from '@/store/modules/DataHeader'

defineProps({
  hasColor: {
    type: Boolean,
    default: () => false,
  },
})
const headerstore = useDataHeaderStore()
const datalist = 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()
  setTimeout(() => {
    headerstore.setDataConfig(false)
    // alert(headerstore.DataConfig)
  }, 500)
  // headerstore.setDataConfig(false)
})

async function getData() {
  const { data } = await gettaskToolsCount()
  if (data) {
    const {
      total,
      treat,
      alreadyApprove,
      repeatedNodules,
      repeat,
      approvedCount,
      notGoCount,
    } = data
    const newdata = [
      {
        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,
      },
    ]
    datalist.value = newdata
  }
}
watch(
  () => headerstore.DataConfig,
  (newval) => {
    if (headerstore.DataConfig) {
      getData()
      headerstore.setDataConfig(false)
    }
  },
)
defineExpose({
  getData,
})
</script>

<template>
  <div class="header_wrap" :style="hasColor ? '' : 'margin-top: 7.375rem;'">
    <div v-for="(item, index) in datalist" :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>