1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <template>
| <el-scrollbar :height="mapHeight">
| <el-card class="p-events-auto wrapper">
| <div>{{ subtask.name }}</div>
| <el-timeline style="max-width: 600px">
| <el-timeline-item
| v-for="(activity, index) in activities"
| :key="index"
| :timestamp="activity.timestamp"
| :hide-timestamp="activity.running"
| :type="activity.running ? 'danger' : 'success'"
| :size="activity.running ? 'large' : 'normal'"
| :hollow="false"
| >
| {{ activity.content }}
| </el-timeline-item>
| </el-timeline>
| </el-card>
| </el-scrollbar>
| </template>
|
| <script>
| import { inject } from 'vue'
| /**
| * 具体巡查任务可视化
| * 包括地图定位信息展示、巡查任务全流程平铺展示
| */
| export default {
| setup() {
| const mapHeight = inject('mapHeight')
|
| const height = 'height:' + mapHeight
| return { height, mapHeight }
| },
| props: {
| subtask: {
| type: Object,
| default: () => {
| return {
| guid: 'SMuheEkjswioSn7A',
| name: '中科生态数字港项目巡查中科生态数字港项目巡查',
| district: '金山区',
| planTime: '2024-06-04',
| startTime: '2024-06-04 13:31:26',
| endTime: '2024-06-04 13:33:37',
| userName: '朱正强',
| status: '已结束',
| total: 4,
| checked: 2
| }
| }
| }
| },
| data() {
| return {
| activities: [
| {
| content: '任务创建',
| timestamp: '2024-06-04 08:00',
| running: false
| },
| {
| content: '开始巡查',
| timestamp: '2024-06-04 09:00',
| running: false
| },
| {
| content: '结束巡查',
| timestamp: '2024-06-04 09:15',
| running: false
| },
| {
| content: '完成问题审核',
| timestamp: '2024-06-04 10:15',
| running: false
| },
| {
| content: '问题整改中...',
| timestamp: '2024-06-04 10:15',
| running: true
| }
| ]
| }
| }
| }
| </script>
|
| <style scoped>
| .wrapper {
| /* position: absolute; */
| top: 0;
| right: 0;
| /* background-color: wheat; */
| }
| </style>
|
|
