|
@@ -1,5 +1,16 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="card p-4 mb-3 clickable" @click="$emit('click', task.id)">
|
|
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="card p-4 mb-3 clickable"
|
|
|
|
|
+ hover-class="scale-down"
|
|
|
|
|
+ :hover-start-time="0"
|
|
|
|
|
+ :hover-stay-time="150"
|
|
|
|
|
+ :class="{
|
|
|
|
|
+ 'border-l-4 border-red-500': task.type === 'emergency',
|
|
|
|
|
+ 'bg-green-50': task.status === 'completed'
|
|
|
|
|
+ }"
|
|
|
|
|
+ :style="borderStyle"
|
|
|
|
|
+ @click="$emit('click', task.id)"
|
|
|
|
|
+ >
|
|
|
<view class="flex justify-between items-start mb-2">
|
|
<view class="flex justify-between items-start mb-2">
|
|
|
<view class="flex-1 min-w-0 mr-3">
|
|
<view class="flex-1 min-w-0 mr-3">
|
|
|
<text class="text-sm font-semibold text-gray-800 truncate block">{{ task.projectName || '未命名任务' }}</text>
|
|
<text class="text-sm font-semibold text-gray-800 truncate block">{{ task.projectName || '未命名任务' }}</text>
|
|
@@ -74,4 +85,28 @@ const progressPercent = computed(() => {
|
|
|
}
|
|
}
|
|
|
return map[props.task.status] ?? 0
|
|
return map[props.task.status] ?? 0
|
|
|
})
|
|
})
|
|
|
|
|
+
|
|
|
|
|
+const borderStyle = computed(() => {
|
|
|
|
|
+ if (props.task.type === 'emergency') return {}
|
|
|
|
|
+ const color = {
|
|
|
|
|
+ pending: '#f59e0b',
|
|
|
|
|
+ confirmed: '#2563eb',
|
|
|
|
|
+ scheduled: '#2563eb',
|
|
|
|
|
+ departed: '#8b5cf6',
|
|
|
|
|
+ arrived: '#10b981',
|
|
|
|
|
+ constructing: '#2563eb',
|
|
|
|
|
+ inspecting: '#f59e0b',
|
|
|
|
|
+ completed: '#10b981',
|
|
|
|
|
+ cancelled: '#ef4444',
|
|
|
|
|
+ rejected: '#ef4444',
|
|
|
|
|
+ }[props.task.status] || '#2563eb'
|
|
|
|
|
+ return { borderLeftColor: color }
|
|
|
|
|
+})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.scale-down {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+ transition: transform 0.15s ease;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|