ISCS_Standard_front/src/views/UiCom/myTodo.vue

<template>
  <div class="container" @click="handleNewPageJump">
    <section class="lefticon">
      <img src="../../assets/images/topTodo.png" alt=""/>
    </section>
    <section class="righticon">
      <p>{{ t('workplace.todoMessage') }}</p>
      <span>{{documentTodos}}</span>
    </section>
  </div>
</template>

<script setup lang="ts">
import * as Agent from '@/api/system/notify/agent'

const router=useRouter()
const { t } = useI18n()
const queryParams = reactive({
  pageNum: 1,
  pageSize: -1,
  queryType: '0', // 默认全部
  startTime: '',
  endTime: ''
})
const documentTodos = ref(null)


onMounted(() => {
  getAgentNum()
})
// 获取待办数量
const getAgentNum = async () => {
  const agentData = await Agent.getMyAgent(queryParams)
  documentTodos.value = agentData.handleAgent.length
  console.log(agentData.handleAgent.length, 'agentData')
}

// 代办：处理跳转逻辑
const handleNewPageJump = () => {
  router.push({ name: 'Agent' })
}

</script>

<style scoped lang="scss">
.container{
  width: 320px;
  height: 150px;
  border: 2px solid #0b0b0b;
  background: #ffffff;
  border-radius: 15px;
  display: flex;
  .lefticon{
    width: 50%;
    height: 90%;
    margin:5px 20px;
    //background: #000;
    img{
      width:100%;
      height:100%;
    }
  }
  .righticon{
    width:50%;
    height: 100px;
    margin:30px 15px;
    text-align:right;
    p{
      font-size: 20px;
      font-weight: bold;
    }
    span{
      font-size: 30px;
      font-weight: bold;
      color: #cc0b0b;
    }
  }
}
</style>