学习进度条

今日所花时间：四小时
今日代码量：300行
博客量：一篇
了解到的知识点：

一、今日开发概述

今日进行巡检计划页面的 Vue 代码开发。

二、使用到的技术

1. Vue 3 组合式 API

本次开发使用了 Vue 3 的组合式 API，通过 script setup 语法糖，使得代码结构更加清晰，逻辑组织更加灵活。例如：

<script setup>
import { ref, onMounted, computed } from 'vue'
// 定义响应式数据
const inspectionPlans = ref([])
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
})
// 生命周期钩子
onMounted(() => {
    fetchInspectionPlans()
})
</script>

ref 用于创建响应式数据，onMounted 用于在组件挂载后执行代码，computed 用于创建计算属性，这些 API 让代码的逻辑更加模块化和易于维护。

2. ElementPlus 组件库

ElementPlus 是基于 Vue 3 的 UI 组件库，提供了丰富的组件，如表格、表单、对话框等，极大地提高了开发效率。在巡检计划页面中，使用了大量的 ElementPlus 组件：

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>设备巡检计划管理</span>
                <div class="extra">
                    <el-button type="primary" @click="openDrawer">
                        <Plus /> 新建巡检计划
                    </el-button>
                </div>
            </div>
        </template>
        <!-- 搜索过滤 -->
        <el-form :model="searchForm" inline class="mb-4">
            <!-- 表单元素 -->
        </el-form>
        <!-- 计划列表 -->
        <el-table :data="inspectionPlans" style="width: 100%" border>
            <!-- 表格列 -->
        </el-table>
    </el-card>
</template>

通过使用 ElementPlus 组件，快速搭建出了页面的基本结构，并且可以方便地进行样式和交互的定制。

3. Axios 进行数据请求

使用 Axios 库进行与后端的数据交互，通过封装的 API 函数来获取和提交数据。例如：

import { 
    getInspectionPlanListService, 
    addInspectionPlanService, 
    updateInspectionPlanService, 
    deleteInspectionPlanService,
    getInspectionPlanByIdService
} from '@/api/inspection'
import request from '@/utils/request'

// 获取巡检计划列表
const fetchInspectionPlans = async () => {
    try {
        const params = {
            pageNum: pagination.value.currentPage,
            pageSize: pagination.value.pageSize,
            deviceType: searchForm.value.deviceType || undefined,
            planName: searchForm.value.planName || undefined,
            status: searchForm.value.status
        }
        const response = await getInspectionPlanListService(params)
        // 处理响应数据
    } catch (error) {
        console.error('获取巡检计划列表失败:', error)
        ElMessage.error('获取巡检计划列表失败: ' + (error.message || '未知错误'))
    }
}

Axios 提供了简洁的 API 来发送 HTTP 请求，并且支持异步操作，使得数据的获取和处理更加方便。

三、了解到的知识点

1. 表单验证

在表单提交时，需要对用户输入的数据进行验证，确保数据的完整性和正确性。在代码中，使用了 ElementPlus 表单组件的验证规则来实现表单验证：

const rules = {
    planName: [
        { required: true, message: '请输入计划名称', trigger: 'blur' },
        { min: 2, max: 128, message: '长度在 2 到 128 个字符', trigger: 'blur' }
    ],
    deviceType: [
        { required: true, message: '请选择设备类型', trigger: 'change' }
    ],
    // 其他字段的验证规则
}

通过定义验证规则，可以在用户输入数据时进行实时验证，并在提交表单时进行最终验证，提高了数据的质量。

2. 分页处理

在显示巡检计划列表时，需要对数据进行分页处理，以提高页面的加载速度和用户体验。使用了 ElementPlus 的分页组件 el-pagination 来实现分页功能：

<el-pagination
    v-model:current-page="pagination.currentPage"
    v-model:page-size="pagination.pageSize"
    :page-sizes="[10, 20, 50, 100]"
    :total="pagination.total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    class="mt-4"
/>

通过监听 size-change 和 current-change 事件，可以在用户切换页码或改变每页显示数量时，重新获取数据并更新页面。

3. 人脸识别与停留时间验证

在生成工单的过程中，增加了人脸识别和停留时间验证的功能，以确保工单的生成符合安全和流程要求。通过引入自定义组件 FaceRecognition 和 StayTimeDetector 来实现这两个功能：

<FaceRecognition
    ref="faceRecognitionRef"
    :width="350"
    :height="250"
    :auto-start="false"
    @recognition-success="handleFaceRecognitionSuccess"
    @recognition-failed="handleFaceRecognitionFailed"
/>
<StayTimeDetector
    ref="stayTimeDetectorRef"
    :min-stay-time="2"
    :auto-start="false"
    @time-reached="handleTimeReached"
/>

通过监听组件的事件，可以在人脸识别成功或停留时间达到要求时，进行相应的处理。

4. 计算属性的使用

计算属性用于根据其他响应式数据计算得出新的数据，并且具有缓存机制，只有当依赖的数据发生变化时才会重新计算。在代码中，使用计算属性来判断是否可以生成工单、是否可以填写表单等：

const canGenerateOrder = computed(() => {
    const basicVerification = isFaceVerified.value && isTimeReached.value
    const formComplete = orderForm.value.deviceId && orderForm.value.resultDesc
    return basicVerification && formComplete
})

计算属性使得代码更加简洁和易于维护，同时提高了性能。

四、总结

通过本次开发，不仅完成了巡检计划页面的基本功能，还深入了解了 Vue 3 组合式 API、ElementPlus 组件库、Axios 数据请求等技术的使用，同时掌握了表单验证、分页处理、人脸识别与停留时间验证以及计算属性等知识点。在后续的开发中，将继续优化代码，提高页面的性能和用户体验。