zjugis_OA/client/src/views/OaSystem/home/components/CardItemThree.vue

<template>
  <div class="ThreeDetailBox">
    <ul>
      <li
        v-for="(item, index) in signs"
        :class="{ active: currentIndex === index }"
        :key="index"
        @click="clickHandle(item, index)"
      >
        <span class="circle">{{ item['icon'] }}</span>
        <div>
          <p class="title">{{ item['title'] }}</p>
          <div class="numberBox">
            <span class="number">{{ (item['value'] / 10000).toFixed(2) }}</span>
            <span class="unit">{{ item['unit'] }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import request from '@/config/axios'

interface SignInterface {
  icon: string
  title: string
  value: number
  unit: string
}
const currentYear = new Date().getFullYear()
const signs = ref<SignInterface[]>([
  { icon: '签', title: `${currentYear}年度签约`, value: 0, unit: '万元' },
  { icon: '回', title: `${currentYear}年度回款`, value: 0, unit: '万元' },
  { icon: '净', title: `${currentYear}年度净合同额`, value: 0, unit: '万元' },
  { icon: '拓', title: `${currentYear}年度新开拓`, value: 0, unit: '万元' },
  { icon: '分包', title: '待支付', value: 0, unit: '万元' },
  { icon: '外包', title: '待支付', value: 0, unit: '万元' }
])
const currentIndex = ref<number>(0)
const $emit = defineEmits<{
  (e: 'init', data: any): void
  (e: 'click', v: SignInterface): void
}>()
const clickHandle = (item: SignInterface, index: number): void => {
  currentIndex.value = index
  $emit('click', item)
}
const queryContractInfo = async (): Promise<void> => {
  const urlApi = `/contract/info`
  const result = await request.post(
    {
      url: urlApi,
      data: {
        year: currentYear
      }
    },
    'business'
  )
  signs.value[0].value = result.signAmount ?? 0
  signs.value[1].value = result.returnAmount ?? 0
  signs.value[2].value = result.netAmount ?? 0
  signs.value[3].value = result.newAmount ?? 0
  signs.value[4].value = result.subToPay ?? 0
  signs.value[5].value = result.outToPay ?? 0
  $emit('init', result)
}
queryContractInfo()
</script>

<style lang="scss" scoped>
.ThreeDetailBox {
  margin-bottom: 10px;

  > ul {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(2, 50%);
    place-content: space-between space-between;

    > li {
      display: flex;
      padding: 5px 0;
      border: 2px solid transparent;
      border-radius: 8px;
      align-items: center;

      p {
        font-size: 14px;
        color: #626b70;
        white-space: nowrap;
      }
      > div {
        width: 120px;
      }
      &:nth-child(2n + 1) {
        margin-right: 15px;
      }

      &:nth-child(2n) {
        justify-content: end;
      }

      > .circle {
        display: block;
        width: 36px;
        height: 36px;
        margin-right: 10px;
        font-size: 16px;
        line-height: 36px;
        color: #fff;
        text-align: center;
        background-color: #498bef;
        border-radius: 50%;
        flex-shrink: 0;
      }

      &:nth-child(1),
      &:nth-child(2) {
        // &.active,
        // &:hover {
        //   background: linear-gradient(270deg, #eaf4ff 0%, #f9fcff 100%);
        //   border-color: #498bef;
        // }
      }

      &:nth-child(3),
      &:nth-child(4) {
        > .circle {
          background-color: #498bef;
        }
      }

      &:nth-child(5),
      &:nth-child(6) {
        > .circle {
          width: 16px;
          height: 32px;
          padding: 10px 6px;
          margin-left: 2px;
          line-height: 16px;
          background: linear-gradient(180deg, #69d8bd 0%, #12b08a 100%);
          border: 2px solid #05ce9e;
          border-radius: 8px;
        }

        .number {
          color: #f23c3c;
        }
      }
    }
  }

  .numberBox {
    white-space: nowrap;

    > .number {
      font-size: 18px;
      font-weight: bold;
      color: #000000;
    }

    > .unit {
      margin-left: 3px;
      font-size: 14px;
      font-weight: 500;
      color: #626b70;
    }
  }
}
</style>