From ff82e86becbd200adabd2ce56fba1f6b3c6c37e1 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期一, 23 六月 2025 23:10:49 +0800
Subject: [PATCH] 2025.6.23
---
src/components/inspection/TaskItem.vue | 219 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 137 insertions(+), 82 deletions(-)
diff --git a/src/components/inspection/TaskItem.vue b/src/components/inspection/TaskItem.vue
index 433d7d1..dcd6f49 100644
--- a/src/components/inspection/TaskItem.vue
+++ b/src/components/inspection/TaskItem.vue
@@ -1,43 +1,69 @@
<template>
- <div v-if="value">
- <el-row justify="start">
- <el-text>{{ value.name }}</el-text>
+ <div v-if="value" class="wrapper">
+ <el-row justify="center">
+ <el-text size="large">{{ value.districtName }}</el-text>
+ <!-- <el-tag type="info">{{ value.districtName }}</el-tag> -->
</el-row>
<div>
- <el-text>鎬婚噺</el-text>
- <el-text v-if="value._totaltask > 0" size="default">{{
- value._completetask + '/' + value._totaltask
- }}</el-text>
- <el-text v-else size="default">{{ value.completetask + '/' + value.totaltask }}</el-text>
- <el-progress
- style="width: 300px"
- type="line"
- status="warning"
- :text-inside="true"
- :stroke-width="18"
- :striped="percentFormat(value.completetask, value.totaltask) < 100"
- striped-flow
- :percentage="percentFormat(value.completetask, value.totaltask)"
- >
- <template #default="{ percentage }">
- <span class="percentage-value">{{ percentage }}%</span>
- </template>
- </el-progress>
+ <div class="text_title">瀹炴柦杩涘害</div>
+ <template v-if="value._totaltask > 0">
+ <el-space>
+ <!-- <el-text size="default">{{ value._completetask + '/' + value._totaltask }}</el-text> -->
+ <el-text>鎬昏</el-text>
+ <el-progress
+ style="width: 350px"
+ type="line"
+ status="warning"
+ :text-inside="true"
+ :stroke-width="22"
+ :striped="percentFormat(value._completetask, value._totaltask) < 100"
+ striped-flow
+ :percentage="percentFormat(value._completetask, value._totaltask)"
+ >
+ <template #default="{ percentage }">
+ <span class="percentage-value">{{
+ `${value._completetask}/${value._totaltask} (${percentage}%)`
+ }}</span>
+ </template>
+ </el-progress>
+ </el-space>
+ </template>
+ <template v-else>
+ <el-space>
+ <!-- <el-text size="default">{{ value.completetask + '/' + value.totaltask }}</el-text> -->
+ <el-text>鎬昏</el-text>
+ <el-progress
+ style="width: 350px"
+ type="line"
+ status="warning"
+ :text-inside="true"
+ :stroke-width="22"
+ :striped="percentFormat(value.completetask, value.totaltask) < 100"
+ striped-flow
+ :percentage="percentFormat(value.completetask, value.totaltask)"
+ >
+ <template #default="{ percentage }">
+ <span class="percentage-value">{{
+ `${value.completetask}/${value.totaltask} (${percentage}%)`
+ }}</span>
+ </template>
+ </el-progress>
+ </el-space>
+ </template>
</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 / value.count.length + 'px'"
- v-for="item in value.count"
- :key="item.sceneType"
- >
+ <!-- :style="'width: ' + 300 / value.count.length + 'px'" -->
+ <!-- <el-row class="m-t-8"> -->
+ <div v-for="item in value.count" :key="item.sceneType">
+ <el-space v-if="item.finish > 0">
+ <el-text size="default" truncated>{{ item.sceneType }}</el-text>
<el-progress
- :stroke-width="18"
+ :style="'width:' + width"
+ :stroke-width="16"
status="exception"
:text-inside="true"
:striped="percentFormat(item.finish, item.total) < 100"
@@ -45,72 +71,85 @@
:percentage="percentFormat(item.finish, item.total)"
>
<template #default="{ percentage }">
- <span class="percentage-value-small">{{ percentage }}%</span>
+ <span class="percentage-value-small">{{
+ `${item.finish}/${item.total} (${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>
+ </el-space>
+ </div>
+ <div>
+ <div class="text_title">鏃ョ▼杩涘害</div>
+ <el-space>
+ <el-text style="color: transparent;">鏃ョ▼</el-text>
+ <el-progress
+ style="width: 350px"
+ type="line"
+ color="#00b487"
+ :text-inside="true"
+ :stroke-width="22"
+ :percentage="percentFormat(date, dayCount)"
+ >
+ <template #default="{ percentage }">
+ <span class="percentage-value">{{ `${dateStr} (${percentage}%)` }}</span>
+ </template>
+ </el-progress>
+ </el-space>
+ </div>
+ <!-- </el-row> -->
</div>
</template>
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+import { useAreaStore } from '@/stores/area.js'
+import dayjs from 'dayjs'
+
/**
* 宸℃煡浠诲姟鍖哄煙缁熻淇℃伅
*/
-export default {
- props: {
- // name: String,
- // province: String,
- // district: String,
- // planTime: String,
- // startTime: String,
- // endTime: String,
- // userName: String,
- // status: String,
- // totaltask: Number,
- // completetask: Number,
- // count: Array,
+const areaStore = useAreaStore()
- value: Object
- },
- data() {
- return {}
- },
- watch: {},
- computed: {
- // total() {
- // let t = 0
- // this.count.forEach((c) => {
- // t += c.total
- // })
- // return t
- // },
- // finish() {
- // let t = 0
- // this.count.forEach((c) => {
- // t += c.finish
- // })
- // return t
- // }
- },
- methods: {
- percentFormat(finish, total) {
- if (total == 0) {
- return 0
- } else {
- const per = finish / total > 1 ? 1 : finish / total
- return Math.round(per * 100)
- }
- },
- format(percentage) {
- percentage === 100 ? 'Full' : `${percentage}%`
- }
+const props = defineProps({
+ value: Object
+})
+
+const width = ref('300px')
+
+const dayCount = computed(() => dayjs(areaStore.area.endtime).daysInMonth())
+const date = computed(() => {
+ const today = dayjs()
+ const planEndTime = dayjs(areaStore.area.endtime)
+ if (today.isBefore(planEndTime)) {
+ return today.date()
+ } else {
+ return planEndTime.daysInMonth()
}
+})
+const dateStr = computed(()=>{
+ const today = dayjs()
+ const planEndTime = dayjs(areaStore.area.endtime)
+ if (today.isBefore(planEndTime)) {
+ return today.format('MM鏈圖D鏃�')
+ } else {
+ return today.format('MM鏈圖D鏃�')
+ }
+})
+
+function percentFormat(finish, total) {
+ if (total == 0) {
+ return 0
+ } else {
+ const per = finish / total > 1 ? 1 : finish / total
+ return Math.round(per * 100)
+ }
+}
+function format(percentage) {
+ percentage === 100 ? 'Full' : `${percentage}%`
}
</script>
@@ -118,6 +157,19 @@
.wrapper {
border: var(--el-border);
border-radius: var(--el-border-radius-base);
+ box-shadow: var(--el-box-shadow-lighter);
+ background-color: rgba(161, 161, 161, 0.068);
+ padding: 8px 8px;
+}
+
+.text_title {
+ border-left: 6px solid rgb(49, 221, 6);
+ border-bottom: 1px solid rgb(49, 221, 6);
+ padding: 0px 4px 0px 4px;
+ width: 100px;
+ font-size: 15px;
+ margin-bottom: 4px;
+ /* color: #00b487; */
}
.flex-bottom {
@@ -145,4 +197,7 @@
/* margin-top: 10px; */
font-size: var(--el-font-size-small);
}
+:deep(.el-progress-bar__outer) {
+ background-color: rgba(211, 211, 211, 0.411);
+}
</style>
--
Gitblit v1.9.3