Blame view

src/components/inspection/AdminRouteTask.vue 2.19 KB
e0196f8a   wuxw   开发完成admin下巡检任务
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
96
97
98
99
100
101
102
103
104
  <template>
    <div class="task-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="task-list">
            <el-scrollbar>
              <ul class="task-ul">
                <li v-for="(task, index) in tasks" :key="index" :class="{ 'active': task.taskId === currentTaskId }"
                  @click="switchTask(task)">
                  <div>{{ task.planUserName }}({{ task.inspectionPlanName }})</div>
                  <div>{{ task.planInsTime }}</div>
                </li>
              </ul>
            </el-scrollbar>
          </el-card>
        </el-col>
        <el-col :span="18">
          <a-inspection-task-map ref="taskMap" />
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import { queryAdminRouteInspectionTask } from '@/api/inspection/aInspectionPlanDetailApi'
  import AInspectionTaskMap from './AInspectionTaskMap'
  
  export default {
    name: 'AdminRouteTask',
    components: {
      AInspectionTaskMap
    },
    data() {
      return {
        loading: false,
        tasks: [],
        currentTaskId: '',
        inspectionRouteId: ''
      }
    },
    methods: {
      async loadData(params) {
        this.inspectionRouteId = params.inspectionRouteId
        await this.getTaskList()
      },
      async getTaskList() {
        try {
          this.loading = true
          const params = {
            inspectionRouteId: this.inspectionRouteId,
            page: 1,
            row: 100
          }
          const { data } = await queryAdminRouteInspectionTask(params)
          this.tasks = data
          if (this.tasks.length > 0) {
            this.switchTask(this.tasks[0])
          }
        } catch (error) {
          this.$message.error(this.$t('common.fetchError'))
        } finally {
          this.loading = false
        }
      },
      switchTask(task) {
        this.currentTaskId = task.taskId
        this.$refs.taskMap.initMap({
          taskId: task.taskId
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .task-container {
    padding: 20px;
  }
  
  .task-list {
    height: 600px;
  }
  
  .task-ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .task-ul li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }
  
  .task-ul li:hover {
    background-color: #f5f5f5;
  }
  
  .task-ul li.active {
    background-color: #409EFF;
    color: white;
  }
  </style>