From 38ff09bd2a638bc43a365efe0390cc3510d62e68 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 09 六月 2025 17:36:37 +0800
Subject: [PATCH] 2025.6.9 功能编写中
---
src/components/inspection/TaskItem.vue | 105 ++++++++++++++++++++++++++++------------------------
1 files changed, 56 insertions(+), 49 deletions(-)
diff --git a/src/components/inspection/TaskItem.vue b/src/components/inspection/TaskItem.vue
index f508784..b3b6c0b 100644
--- a/src/components/inspection/TaskItem.vue
+++ b/src/components/inspection/TaskItem.vue
@@ -1,52 +1,56 @@
<template>
- <!-- <div class="demo-progress border-r-small"> -->
- <el-row justify="end">
- <el-text type="info">{{ name }}</el-text>
+ <el-row justify="start">
+ <el-text>{{ name }}</el-text>
</el-row>
- <el-row justify="space-evenly">
- <el-col span="12">
- <div class="v-center">
- <el-text>鎬婚噺</el-text>
- <el-progress
- :width="100"
- type="circle"
- status="warning"
- :percentage="percentFormat(completetask, totaltask)"
- >
- <template #default="{ percentage }">
- <span class="percentage-value">{{ percentage }}%</span>
- <!-- <span class="percentage-label">{{ finish + '/' + total }}</span> -->
- </template>
- </el-progress>
- <el-text size="small">{{ completetask + '/' + totaltask }}</el-text>
- </div>
- </el-col>
- <el-col span="12" class="flex-bottom">
- <!-- <div>{{ name }}</div> -->
- <!-- <div>{{ planTime }}</div> -->
- <!-- <div>{{ userName }}</div> -->
- <el-row style="gap: 40px" justify="space-between">
- <div class="v-center" v-for="item in count" :key="item.sceneType">
- <el-text size="small">{{ item.sceneType }}</el-text>
- <el-progress
- :width="50"
- :stroke-width="3"
- type="circle"
- status="warning"
- :percentage="percentFormat(item.finish, item.total)"
- >
- <template #default="{ percentage }">
- <span class="percentage-value-small">{{ percentage }}%</span>
- </template>
- </el-progress>
- <el-text size="small">{{ item.finish + '/' + item.total }}</el-text>
- <!-- <div class="percentage-label-small">{{ item.sceneType }}</div> -->
- <!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> -->
- </div>
- </el-row>
- </el-col>
+ <div>
+ <el-text>鎬婚噺</el-text>
+ <el-text size="small">{{ completetask + '/' + totaltask }}</el-text>
+ <el-progress
+ style="width: 300px"
+ type="line"
+ status="warning"
+ :text-inside="true"
+ :stroke-width="18"
+ :striped="percentFormat(completetask, totaltask) < 100"
+ striped-flow
+ :percentage="percentFormat(completetask, totaltask)"
+ >
+ <template #default="{ percentage }">
+ <span class="percentage-value">{{ percentage }}%</span>
+ </template>
+ </el-progress>
+ </div>
+ <!-- </el-col> -->
+ <!-- <el-col span="12" class="flex-bottom"> -->
+ <!-- <div>{{ name }}</div> -->
+ <!-- <div>{{ planTime }}</div> -->
+ <!-- <div>{{ userName }}</div> -->
+ <el-row class="m-t-8">
+ <div
+ align="center"
+ :style="'width: ' + 300 / count.length + 'px'"
+ v-for="item in count"
+ :key="item.sceneType"
+ >
+ <el-progress
+ :stroke-width="18"
+ status="exception"
+ :text-inside="true"
+ :striped="percentFormat(item.finish, item.total) < 100"
+ striped-flow
+ :percentage="percentFormat(item.finish, item.total)"
+ >
+ <template #default="{ percentage }">
+ <span class="percentage-value-small">{{ percentage }}%</span>
+ </template>
+ </el-progress>
+ <el-text size="small" truncated>{{ item.sceneType }}</el-text>
+ <!-- <el-text size="small">{{ item.finish + '/' + item.total }}</el-text> -->
+ <!-- <span class="percentage-value-small">{{ percentFormat(item.finish, item.total) }}%</span> -->
+ <!-- <div class="percentage-label-small">{{ item.sceneType }}</div> -->
+ <!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> -->
+ </div>
</el-row>
- <!-- </div> -->
</template>
<script>
@@ -93,8 +97,12 @@
if (total == 0) {
return 0
} else {
- return Math.round((finish / total) * 100)
+ const per = finish / total > 1 ? 1 : finish / total
+ return Math.round(per * 100)
}
+ },
+ format(percentage) {
+ percentage === 100 ? 'Full' : `${percentage}%`
}
}
}
@@ -114,8 +122,7 @@
.percentage-value {
display: block;
- margin-top: 10px;
- font-size: var(--el-font-size-base);
+ font-size: var(--el-font-size-small);
}
.percentage-value-small {
display: block;
--
Gitblit v1.9.3