卡片样式修改
This commit is contained in:
@@ -11,24 +11,49 @@ const tenantInfo = ref<any>(null);
|
||||
const taskCountMap = ref<Record<string, number>>({});
|
||||
|
||||
const list = computed(() => [
|
||||
// {
|
||||
// label: t('project.task.09116237-0'),
|
||||
// prop: 'backlogCount',
|
||||
// color: '#FD9595',
|
||||
// path: '/task/pending',
|
||||
// },
|
||||
// {
|
||||
// label: t('components.TopNav.0910664-1'),
|
||||
// prop: 'createCount',
|
||||
// color: '#6D9CF8',
|
||||
// path: '/task/started',
|
||||
// },
|
||||
// {
|
||||
// label: t('components.TopNav.0910664-2'),
|
||||
// prop: 'finishCount',
|
||||
// color: '#53B997',
|
||||
// path: '/task/completed',
|
||||
// },
|
||||
|
||||
{
|
||||
label: t('project.task.09116237-0'),
|
||||
prop: 'backlogCount',
|
||||
color: '#FD9595',
|
||||
path: '/task/pending',
|
||||
},
|
||||
{
|
||||
label: t('components.TopNav.0910664-1'),
|
||||
label:'完成任务',
|
||||
prop: 'createCount',
|
||||
color: '#6D9CF8',
|
||||
path: '/task/started',
|
||||
},
|
||||
{
|
||||
label: t('components.TopNav.0910664-2'),
|
||||
label: '关注任务',
|
||||
prop: 'backlogCount',
|
||||
color: '#FD9595',
|
||||
path: '/task/pending',
|
||||
},
|
||||
{
|
||||
label: '发起任务',
|
||||
prop: 'finishCount',
|
||||
color: '#53B997',
|
||||
path: '/task/completed',
|
||||
},
|
||||
{
|
||||
label: '所有任务',
|
||||
prop: 'allCount',
|
||||
color: '#808080',
|
||||
path: '/task/completed',
|
||||
},
|
||||
]);
|
||||
|
||||
const getTenantList = () => {
|
||||
@@ -41,6 +66,9 @@ const getTenantList = () => {
|
||||
const getTaskCount = async () => {
|
||||
const res = await getTaskCountApi();
|
||||
taskCountMap.value = res.data;
|
||||
taskCountMap.value.allCount = Number(taskCountMap.value.backlogCount) + Number(taskCountMap.value.createCount) + Number(taskCountMap.value.finishCount)
|
||||
console.log(taskCountMap.value,'taskCountMap.value');
|
||||
|
||||
};
|
||||
|
||||
onActivated(() => {
|
||||
@@ -73,10 +101,10 @@ const handleClick = (path: string) => {
|
||||
<div class="font-bold text-lg">{{ userInfos.user.nickname }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 grid grid-cols-3 h-[40px] justify-between">
|
||||
<div class="col-span-2 grid grid-cols-4 h-[40px] justify-between">
|
||||
<div v-for="item in list" :key="item.prop" class="flex flex-col justify-between">
|
||||
<div class="text-sm text-[#000000A6]">{{ item.label }}</div>
|
||||
<div class="text-xl cursor-pointer" @click="handleClick(item.path)" :style="{ color: item.color }">{{
|
||||
<div class="text-xl cursor-pointer" :style="{ color: item.color }" @click="handleClick(item.path)">{{
|
||||
taskCountMap[item.prop] ?? 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@ const initChartFn = () => {
|
||||
option.value = {
|
||||
|
||||
title: {
|
||||
text: '系统任务完成状态'
|
||||
text: '系统任务状态'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@@ -93,7 +93,7 @@ onMounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
min-height: 295px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -11,10 +11,8 @@ export default {
|
||||
<div class="table-content">
|
||||
<div class="title-content"></div>
|
||||
<div class="table-inner">
|
||||
|
||||
|
||||
<TableRender style="width: 100%" row-key="id" border :data="tableData" :columns="tableColumns">
|
||||
</TableRender>
|
||||
</TableRender>
|
||||
<pagination v-bind="paginationInfo" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
|
||||
|
||||
</div>
|
||||
@@ -150,6 +148,39 @@ const tableData = ref<any[]>([
|
||||
"project": "XX用户管理系统开发",
|
||||
"phase": "测试阶段"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"taskName": "搭建用户登录模块数据库表结构",
|
||||
"taskStatus": "进行中",
|
||||
"taskRisk": "低(技术方案已确认,无明确风险)",
|
||||
"taskProgress": "70%(已完成核心字段设计,待优化索引)",
|
||||
"beginTime": "2025-10-28",
|
||||
"endTime": "2025-11-01",
|
||||
"project": "XX用户管理系统开发",
|
||||
"phase": "开发阶段"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"taskName": "设计双11促销活动海报",
|
||||
"taskStatus": "待开始",
|
||||
"taskRisk": "中(需与运营确认活动主题,可能影响设计进度)",
|
||||
"taskProgress": "0%",
|
||||
"beginTime": "2025-11-02",
|
||||
"endTime": "2025-11-05",
|
||||
"project": "2025双11电商促销项目",
|
||||
"phase": "策划设计阶段"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"taskName": "测试APP订单支付异常场景",
|
||||
"taskStatus": "已完成",
|
||||
"taskRisk": "低(测试用例覆盖全面)",
|
||||
"taskProgress": "100%(发现2个bug已修复)",
|
||||
"beginTime": "2025-10-25",
|
||||
"endTime": "2025-10-27",
|
||||
"project": "XX电商APP V3.5迭代",
|
||||
"phase": "测试阶段"
|
||||
},
|
||||
|
||||
]);
|
||||
const tableColumns = ref([
|
||||
@@ -207,6 +238,6 @@ const sizeChangeHandle = (val:any)=>{
|
||||
.table-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 500px;
|
||||
min-height: 650px;
|
||||
}
|
||||
</style>
|
||||
@@ -52,13 +52,13 @@ const initChartFn = () => {
|
||||
name: '分配任务',
|
||||
type: 'line',
|
||||
stack: 'Total1',
|
||||
data: [120, 132, 101, 134, 90, 111, 121,86,65,55,40,23]
|
||||
data: [15, 17, 22, 31, 21, 16, 10,8,14,19,21,16]
|
||||
},
|
||||
{
|
||||
name: '完成任务',
|
||||
type: 'line',
|
||||
stack: 'Total2',
|
||||
data: [15, 65, 100, 166, 135, 165, 155,100,134,121,85,78]
|
||||
data: [12, 15, 18, 25, 20, 12, 10,8,12,16,20,15]
|
||||
},
|
||||
]
|
||||
};
|
||||
@@ -75,7 +75,7 @@ onMounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
min-height: 295px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
<template>
|
||||
<div ref="main" :class="['widgets-home', customizing ? 'customizing' : '']">
|
||||
<div class="widgets-content">
|
||||
<!-- <TopNav /> -->
|
||||
<TopNav />
|
||||
<div class="widgets-top">
|
||||
<div class="flex justify-end custom_btn">
|
||||
<el-button v-if="customizing" type="primary" round @click="save">{{ $t('widgets.index.0910663-0') }}</el-button>
|
||||
|
||||
Reference in New Issue
Block a user