on-site-robots-screen/src/views/home/components/modal-content/inspection-task.vue

<template>
    <!-- 巡视任务 -->
    <DialogModal
        @onHandleCloseModal="onHandleCloseModal"
        :modalTitle="modalTitle"
        :height="`90vh`"
        :width="`90vw`"
    >
        <!-- 巡视任务-->
        <div class="inspection-task-container" ref="inspectionTaskContainer">
            <n-form
                inline
                ref="formRef"
                size="small"
                label-placement="left"
                style="margin-top: 10px"
            >
                <n-form-item>
                    <n-input placeholder="任务名称" clearable style="width: 240px" />
                </n-form-item>
                <n-button type="info" @click="getTaskList"> 查询</n-button>
                <n-button color="#6E90A9" style="margin-left: 8px" @click="onHandleAdd">
                    新增
                </n-button>
            </n-form>

            <n-data-table :columns="columns" :data="data" />

            <div style="margin-top: 10px; display: flex; justify-content: flex-end">
                <n-pagination
                    v-if="total > 0"
                    show-size-picker
                    :page-count="total"
                    :page-sizes="[10, 20, 30, 50]"
                    v-model:page="queryParams.pageNum"
                    v-model:page-size="queryParams.pageSize"
                />
            </div>
        </div>
    </DialogModal>
</template>

<script setup>
import DialogModal from '@/components/DialogModal/index.vue'
import { AddCircleSharp } from '@vicons/ionicons5'
import { NIcon } from 'naive-ui'
import { NButton, NSwitch, NTag, useMessage } from 'naive-ui'
import { ref } from 'vue'
import { getTaskListApi, updateTaskEnableApi, handleRobotActionApi } from '@/api/home'
import { getRobotDeviceListFn } from '@/utils/getRobotInfo'

const emits = defineEmits(['onHandleCloseModal', 'onHandleAddInspectionTask'])
const modalTitle = ref('巡视任务') // 弹框标题
const addOrEditVisible = ref(false) // 新增或编辑弹框
const addOrEditTitle = ref('新增巡视任务') // 新增或编辑弹框标题
const total = ref(0)
const message = useMessage()

const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    taskName: '',
    // robotId: 'WTBLS204766',
})

const btnList = [
    {
        label: '编辑',
        type: 'info',
        btnType: 1,
    },
    {
        label: '立即执行',
        type: 'info',
        btnType: 2,
    },
    {
        label: '下发',
        type: 'info',
        btnType: 3,
    },
    {
        label: '删除',
        type: 'info',
        btnType: 4,
    },
]

const columns = ref([
    {
        title: '任务ID',
        key: 'taskId',
        align: 'center',
    },
    {
        title: '任务名',
        key: 'taskName',
        align: 'center',
    },
    {
        title: '设备名称',
        key: 'robotName',
        align: 'center',
    },
    // {
    //     title: '地盘名称',
    //     key: 'age',
    //     align: 'center',
    // },
    {
        title: '任务频次',
        key: 'count',
        align: 'center',
    },
    // {
    //     title: '执行时间',
    //     key: 'age',
    //     align: 'center',
    // },
    // {
    //     title: '任务状态',
    //     key: 'taskStatus',
    //     align: 'center',
    //     render(row) {
    //         return h(
    //             NTag,
    //             {
    //                 style: {
    //                     marginRight: '6px',
    //                 },
    //                 type: 'info',
    //                 bordered: false,
    //             },
    //             {
    //                 default: () => {
    //                     return row.taskStatus == 1 ? '巡视中' : '未开始'
    //                 },
    //             },
    //         )
    //     },
    // },

    {
        title: '启用',
        key: 'enable',
        align: 'center',
        render(row) {
            return h(NSwitch, {
                value: row.enable == 1 ? true : false,
                onChange: (value) => onHandleSwitch(row, value),
            })
        },
    },
    {
        title: '操作',
        key: 'age',
        align: 'center',
        width: 260,
        render(row) {
            const buttonS = btnList.map((btn) => {
                return h(
                    NButton,
                    {
                        size: 'small',
                        onClick: () => onHandleBtn(row, btn.btnType),
                        type: btn.type,
                        style: {
                            marginRight: '4px',
                        },
                    },
                    { default: () => btn.label },
                )
            })
            return buttonS
        },
    },
])
const data = ref([
    {
        age: '2025-06-01 10:00:00',
        tags: ['nice'],
        isEnable: true,
    },
    {
        age: '2025-06-01 10:00:00',
        tags: ['nice'],
        isEnable: false,
    },
    {
        age: '2025-06-01 10:00:00',
        tags: ['nice'],
        isEnable: false,
    },
])

// 新增按钮
const onHandleAdd = () => {
    console.log('新增')
    // addOrEditVisible.value = true
    // addOrEditTitle.value = '新增巡视任务'
    emits('onHandleAddInspectionTask')
}

// 获取巡视任务列表
const getTaskList = async () => {
    const { data: res } = await getTaskListApi(queryParams.value)
    total.value = res.total
    data.value = res.rows
}

getTaskList()

// 按钮操作组
const onHandleBtn = (row, type) => {
    console.log(row, type)
    // 1. 编辑 2. 立即执行 3. 下发 4. 删除
    switch (type) {
        case 1:
            onHandleEditTable(row)
            break
        case 2:
            onHandleImmediateExecution(row)
            break
        case 3:
            onHandleSend(row)
            break
        case 4:
            onHandleDelete(row)
            break
    }
}

// 编辑
const onHandleEditTable = (row) => {
    console.log(row)
    addOrEditVisible.value = true
    addOrEditTitle.value = '编辑巡视任务'
}

// 立即执行
const onHandleImmediateExecution = async (row) => {
    const { data: res } = await handleRobotActionApi({
        taskId: row.taskId,
        type: '13',
        puId: row.puid,
    })
    console.log(res, '立即执行结果')
}

// 下发
const onHandleSend = async (row) => {
    console.log(row)
    const { data: res } = await updateTaskEnableApi({
        taskStatus: '1',
        id: row.id,
        puid: row.puid,
    })

    if (res.data.code == 200) {
        message.success('下发成功')
        getTaskList()
    } else {
        message.error('下发失败')
    }
}

// 删除
const onHandleDelete = (row) => {
    console.log(row)
}

// 关闭弹框外层
const onHandleCloseModal = () => {
    emits('onHandleCloseModal')
}

// 关闭弹框内层
const onHandleCloseModalInner = () => {
    addOrEditVisible.value = false
}

// 启用开关
const onHandleSwitch = async (row, value) => {
    console.log(row, value)
    const { data: res } = await updateTaskEnableApi({
        enable: value ? '1' : '0',
        id: row.id,
        puid: row.puid,
    })

    if (res.data.code == 200) {
        message.success(value ? '启动成功' : '禁用成功')
        getTaskList()
    } else {
        message.error('启动失败')
    }
}
</script>

<style lang="scss" scoped>
.plane-map-container {
    width: 100%;
    height: 100%;
}
</style>