代码完善

2025-07-01 10:34:22 +08:00 · 2025-07-01 10:34:22 +08:00 · bb62345c1a
parent 0a1de88495
commit bb62345c1a
11 changed files with 989 additions and 340 deletions
--- a/src/api/home.js
+++ b/src/api/home.js
@ -28,11 +28,38 @@ export const getMarkerListAllApi = (data) => {
 export const addTaskApi = (data) => {
    return service.post('/robot-screen-api/robot/instruct/addTasks', data)
 }
+
 // 获取巡视任务列表
 export const getTaskListApi = (data) => {
    return service.get('/robot-screen-api/robot/instruct/list', { params: data })
 }
+
 // 修改巡视任务启用状态
 export const updateTaskEnableApi = (data) => {
    return service.post('/robot-screen-api/robot/instruct/issuedTask', data)
 }
+
+// 获取巡视任务详情
+export const getTaskDetailApi = (data) => {
+    return service.post('/robot-screen-api/robot/instruct/getTaskDetails', data)
+}
+
+// 修改巡视任务
+export const updateTaskApi = (data) => {
+    return service.post('/robot-screen-api/robot/instruct/updateTask', data)
+}
+
+// 删除巡视任务
+export const deleteTaskApi = (data) => {
+    return service.post('/robot-screen-api/robot/instruct/delTaskData', data)
+}
+
+// 新增人员
+export const addPersonApi = (data) => {
+    return service.post('/robot-screen-api/robot/sbdUser/addSbdUser', data)
+}
+
+// 获取人员列表
+export const getPersonListApi = (data) => {
+    return service.get('/robot-screen-api/robot/instruct/list', { params: data })
+}
--- a/src/style/naiveUi.scss
+++ b/src/style/naiveUi.scss
@ -39,6 +39,14 @@
    border: 1px solid #1090f0;
 }

+.n-checkbox .n-checkbox-box .n-checkbox-box__border {
+    border: 1px solid #1090f0;
+}
+
+.n-checkbox .n-checkbox-box {
+    background-color: #1d3861;
+} 
+
 .n-input:not(.n-input--disabled).n-input--focus {
    background-color: #1d3861;
    color: #fff;
@ -110,4 +118,20 @@

 .n-data-table .n-data-table-td {
    border-bottom: none;
+}
+
+.n-base-selection.n-base-selection--error-status:not(.n-base-selection-disabled).n-base-selection--active .n-base-selection-label {
+    background-color: #1d3861;
+}
+
+.n-input.n-input--error-status:not(.n-input--disabled).n-input--focus,.n-checkbox-box {
+    background-color: #1d3861;
+}
+
+.n-radio .n-radio__label {
+    color: #fff;
+}
+
+.n-radio .n-radio__dot {
+    background-color: #1d3861; 
 }
--- a/src/views/home/components/control-deck.vue
+++ b/src/views/home/components/control-deck.vue
@ -2,34 +2,66 @@
    <!-- 机器人操控面板 -->
    <div class="control-deck child-container">
        <!-- 第一行 -->
-        <n-grid :cols="10">
-            <n-grid-item :span="5">
+        <n-grid :cols="24">
+            <n-grid-item :span="9">
                <div class="row-1-item">摄像头</div>
            </n-grid-item>
-            <n-grid-item :span="3" v-if="false">
-                <div class="row-1-item">升降杆</div>
+            <n-grid-item :span="6">
+                <!-- <div class="row-1-item">升降杆</div> -->
+                <div
+                    class="row-1-item"
+                    style="display: flex; align-items: center; justify-content: center"
+                >
+                    <n-icon size="26">
+                        <!-- 绿色 -->
+                        <BatteryFullSharp
+                            color="#16E607"
+                            v-if="robotBaseInfo.dl >= 80 && robotBaseInfo.type != '充电中'"
+                        />
+                        <BatteryHalfSharp
+                            color="#E69807"
+                            v-else-if="robotBaseInfo.dl >= 50 && robotBaseInfo.type != '充电中'"
+                        />
+                        <BatteryDeadSharp
+                            color="#F90303"
+                            v-else-if="robotBaseInfo.type != '充电中'"
+                        />
+                        <BatteryChargingSharp
+                            color="#16E607"
+                            v-if="robotBaseInfo.type == '充电中'"
+                        />
+                    </n-icon>
+                    <span style="margin-left: 4px; font-size: 13px"> {{ robotBaseInfo.dl }}%</span>
+                </div>
            </n-grid-item>
-            <n-grid-item :span="5">
+            <n-grid-item :span="9">
                <div class="row-1-item">底盘</div>
            </n-grid-item>
        </n-grid>
        <!-- 第二行 -->
-        <n-grid :cols="10">
-            <n-grid-item :span="5">
+        <n-grid :cols="24">
+            <n-grid-item :span="9">
                <div class="row-2-item">
                    <div>速度</div>
                    <div>30</div>
                </div>
            </n-grid-item>
-            <n-grid-item :span="3" v-if="false">
-                <div class="row-2-item">
+            <n-grid-item :span="6">
+                <!-- <div class="row-2-item">
                    <div>高度</div>
                    <div>
                        {{ currentHeight }}
                    </div>
+                </div> -->
+
+                <div class="row-2-item">
+                    <div></div>
+                    <div style="width: 70px">
+                        {{ robotBaseInfo.type }}
+                    </div>
                </div>
            </n-grid-item>
-            <n-grid-item :span="5">
+            <n-grid-item :span="9">
                <div class="row-2-item">
                    <div>速度</div>
                    <div>30</div>
@ -286,6 +318,12 @@ import {
 import { handleRobotActionApi } from '@/api/home'
 import { useRobotDataStore } from '@/store/robot'
 import { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo.js'
+import {
+    BatteryHalfSharp,
+    BatteryDeadSharp,
+    BatteryFullSharp,
+    BatteryChargingSharp,
+} from '@vicons/ionicons5'
 import { useMessage } from 'naive-ui'
 import { debounce } from 'lodash'

@ -518,13 +556,14 @@ onMounted(async () => {
    justify-content: space-around;

    & div:last-child {
-        width: 32px;
+        // width: 32px;
        height: 18px;
        background-color: #005899;
        border-radius: 6px;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
+        padding: 4px 10px;
    }
 }

--- a/src/views/home/components/left-one.vue
+++ b/src/views/home/components/left-one.vue
@ -59,6 +59,7 @@
        <div>
            <InspectionTask
                v-if="inspectionTaskVisible"
+                :isChange="isChange"
                @onHandleCloseModal="onHandleCloseInspectionModal"
                @onHandleAddInspectionTask="onHandleAddInspectionTask"
            />
@ -69,6 +70,7 @@
        <div>
            <AddOrEditForm
                v-if="addInspectionTaskVisible"
+                :addOrEditInfo="addOrEditInfo"
                @onHandleCloseModalInner="onHandleCloseModalInner"
            />
        </div>
@ -89,7 +91,14 @@ const inspectionTaskVisible = ref(false) // 巡视任务
 const addInspectionTaskVisible = ref(false) // 新增巡视任务
 const markerInfo = ref({}) // 新增预置点位信息
 const markerInfoNew = ref({}) // 新增预置点位信息 修改后的数据
+const addOrEditInfo = ref({
+    type: '',
+    id: '',
+}) // 新增/修改巡视任务
 const formType = ref('') // 新增/修改
+const isChange = ref({
+    is_change: 'error',
+}) // 是否修改

 const props = defineProps({
    fullScreenVisible: {
@ -160,7 +169,8 @@ const onHandleConfirm = (info) => {
 }

 // 新增巡视任务 打开新增巡视任务弹框
-const onHandleAddInspectionTask = () => {
+const onHandleAddInspectionTask = (info) => {
+    addOrEditInfo.value = info
    addInspectionTaskVisible.value = true
 }

@ -170,7 +180,8 @@ const onHandleCloseInspectionModal = () => {
 }

 // 关闭新增或修改巡视任务弹框
-const onHandleCloseModalInner = () => {
+const onHandleCloseModalInner = (value) => {
+    isChange.value.is_change = value
    addInspectionTaskVisible.value = false
 }

--- a/src/views/home/components/left-two.vue
+++ b/src/views/home/components/left-two.vue
@ -5,12 +5,7 @@

        <div class="map-container" ref="mapContainerRef">
            <svg ref="svgMapRef" class="svg-map-container" :width="svgWidth" :height="svgHeight">
-                <image
-                    :href="mapInfo.mapBase64"
-                    width="100%"
-                    height="100%"
-                    preserveAspectRatio="none"
-                />
+                <image :href="mapImage" width="100%" height="100%" preserveAspectRatio="none" />
                <circle
                    v-for="(point, index) in devicePoints"
                    :key="index"
@ -20,6 +15,10 @@
                    fill="red"
                />
            </svg>
+
+            <n-button class="map-switch-btn" size="small" type="info" @click="onHandleMapSwitch">
+                地图切换
+            </n-button>
        </div>
    </div>
 </template>
@ -28,6 +27,7 @@
 import { ref, nextTick, onMounted } from 'vue'
 import TitleBackground from '@/components/TitleBackground/index.vue'
 import { getRobotDeviceListFn, getRobotMapInfoFn, getRobotPointsInfoFn } from '@/utils/getRobotInfo'
+import imgSrc from '@/assets/demo.png'

 const mapTitle = ref('巡检地图') // 地图标题
 const svgMapRef = ref(null) // 地图svg引用
@ -37,6 +37,8 @@ const xScale = ref(1) // 地图x轴缩放比例
 const yScale = ref(1) // 地图y轴缩放比例
 const devicePoints = ref([]) // 机器人点位
 const mapInfo = ref({}) // 地图信息
+const mapImage = ref('') // 地图图片
+const isMapSwitch = ref(false) // 是否切换地图
 // 获取map-container的宽高赋值给svg
 const mapContainerRef = ref(null)
 // 计算宽高比
@ -57,6 +59,11 @@ const markPoints = (Robot_x, Robot_y) => {
    devicePoints.value.push({ x: Robot_x, y: logicalY1 })
 }

+const onHandleMapSwitch = () => {
+    isMapSwitch.value = !isMapSwitch.value
+    mapImage.value = isMapSwitch.value ? imgSrc : mapInfo.value?.mapBase64
+}
+
 onMounted(async () => {
    nextTick(() => {
        svgWidth.value = mapContainerRef.value.clientWidth
@ -67,6 +74,7 @@ onMounted(async () => {
    const deviceInfo = await getRobotDeviceListFn()
    // 获取地图信息
    mapInfo.value = await getRobotMapInfoFn(deviceInfo?.puId)
+    mapImage.value = mapInfo.value?.mapBase64
    // 计算缩放比例
    calculateScale(mapInfo.value?.mapWidth, mapInfo.value?.mapHeight)
    // 获取机器人点位
@ -90,6 +98,12 @@ onMounted(async () => {
        .svg-map-container {
            position: absolute;
        }
+
+        .map-switch-btn {
+            position: absolute;
+            right: 4px;
+            top: 4px;
+        }
    }
 }
 </style>
--- a/src/views/home/components/modal-content/add-or-edit-form.vue
+++ b/src/views/home/components/modal-content/add-or-edit-form.vue
--- a/src/views/home/components/modal-content/add-or-edit-marker-form.vue
+++ b/src/views/home/components/modal-content/add-or-edit-marker-form.vue
@ -94,6 +94,14 @@
                <n-grid x-gap="24" :cols="24">
                    <n-gi :span="24">
                        <n-flex justify="end">
+                            <n-button
+                                type="info"
+                                style="margin-right: 10px"
+                                @click="onHandleGoToPoint"
+                                v-if="markerParams.type === '修改'"
+                            >
+                                前往点位
+                            </n-button>
                            <n-button
                                type="info"
                                style="margin-right: 10px"
@ -127,7 +135,7 @@
 import DialogModal from '@/components/DialogModal/index.vue'
 import FlvPlayer from '@/components/FlvPlayer/index.vue'
 import ControlDeck from './control-deck.vue'
-import { useMessage } from 'naive-ui'
+import { useMessage, useDialog } from 'naive-ui'
 import { watch, ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
 import { getRobotTokenFn, getRobotDeviceListFn, getRobotMapInfoFn } from '@/utils/getRobotInfo'
 import { handleRobotActionApi, addMarkerApi } from '@/api/home'
@ -136,6 +144,7 @@ const message = useMessage()
 const deviceToken = ref('')
 const deviceInfo = ref(null)
 const isCurrentPosition = ref(null)
+const dialog = useDialog()
 const emits = defineEmits(['onHandleCloseAddMarkerModal', 'onHandleConfirm'])

 const cameraNode = ref({
@ -174,6 +183,7 @@ const markerParams = ref({
    pointName: '',
    PTZ_x: '',
    PTZ_y: '',
+    id: '',
 })
 const props = defineProps({
    markerInfo: {
@ -242,6 +252,7 @@ const getRobotCurrentPosition = async (puId) => {
 // 确认按钮
 const onHandleConfirm = () => {
    // emits('onHandleConfirm', markerParams.value)
+
    handleRobotActionApi({
        puId: deviceInfo.value?.puId,
        type: '2',
@ -249,36 +260,66 @@ const onHandleConfirm = () => {
        console.log(res.data, 'res?.data')

        const { Robot_x, Robot_y, PTZ_x, PTZ_y, PTZ_zoom, Robot_theta } = res?.data.data
-        markerParams.value.xCount = Robot_x
-        markerParams.value.yCount = Robot_y
-        markerParams.value.PTZ_x = PTZ_x
-        markerParams.value.PTZ_y = PTZ_y
-        markerParams.value.markerAngle = Robot_theta
-        markerParams.value.PTZ_zoom = PTZ_zoom

-        // 组装参数
-        // const { PTZ_zoom, markerAngle, PTZ_x, PTZ_y, xCount, yCount, mapId, markerName } =
-        //     markerParams.value
+        // 如果是修改时判断当前位置是否与点位一致
+        if (markerParams.value.type === '修改') {
+            if (
+                Math.abs(Robot_x - markerParams.value.xCount) > 2 ||
+                Math.abs(Robot_y - markerParams.value.yCount) > 2
+            ) {
+                dialog.warning({
+                    title: '温馨提示',
+                    content:
+                        '机器人当前位置与预置点位不一致，您可以点击前往点位按钮，也可以选择继续修改？',
+                    positiveText: '前往点位',
+                    negativeText: '继续修改',
+                    onPositiveClick: () => {
+                        onHandleGoToPoint()
+                    },
+                    onNegativeClick: async () => {
+                        markerParams.value.xCount = Robot_x
+                        markerParams.value.yCount = Robot_y
+                        markerParams.value.PTZ_x = PTZ_x
+                        markerParams.value.PTZ_y = PTZ_y
+                        markerParams.value.markerAngle = Robot_theta
+                        markerParams.value.PTZ_zoom = PTZ_zoom

-        const addMarkerParams = {
-            ptzz: markerParams.value.PTZ_zoom,
-            theta: markerParams.value.markerAngle,
-            ptzx: markerParams.value.PTZ_x,
-            ptzy: markerParams.value.PTZ_y,
-            positionX: Math.ceil(markerParams.value.xCount),
-            positionY: Math.ceil(markerParams.value.yCount),
-            mapId: markerParams.value.mapId,
-            pointName: markerParams.value.markerName,
-        }
-        const { data: result } = await addMarkerApi(addMarkerParams)
+                        const addMarkerParams = {
+                            ptzz: markerParams.value.PTZ_zoom,
+                            theta: markerParams.value.markerAngle,
+                            ptzx: markerParams.value.PTZ_x,
+                            ptzy: markerParams.value.PTZ_y,
+                            positionX: Math.ceil(markerParams.value.xCount),
+                            positionY: Math.ceil(markerParams.value.yCount),
+                            mapId: markerParams.value.mapId,
+                            pointName: markerParams.value.markerName,
+                        }

-        if (result.code == 200) {
-            message.success('新增点位成功')
-            onHandleCloseAddModal()
+                        if (markerParams.value.type === '修改') {
+                            addMarkerParams.id = markerParams.value.id
+                        }
+
+                        const { data: result } = await addMarkerApi(addMarkerParams)
+
+                        if (result.code == 200) {
+                            message.success(
+                                markerParams.value.type === '新增'
+                                    ? '新增点位成功'
+                                    : '修改点位成功',
+                            )
+                            onHandleCloseAddModal()
+                        }
+                    },
+                })
+            }
        }
    })
 }

+const onHandleGoToPoint = () => {
+    handleRobotAction(Math.ceil(markerParams.value.xCount), Math.ceil(markerParams.value.yCount))
+}
+
 const onlyAllowNumber = (value) => !value || /^\d+$/.test(value)

 watch(
@ -294,6 +335,15 @@ watch(
        markerParams.value.markerPreset = newVal?.markerPreset
        markerParams.value.xCount = Math.ceil(newVal?.xCount).toString()
        markerParams.value.yCount = Math.ceil(newVal?.yCount).toString()
+
+        if (newVal?.type === '新增') {
+            handleRobotAction(
+                Math.ceil(markerParams.value.xCount),
+                Math.ceil(markerParams.value.yCount),
+            )
+        } else {
+            markerParams.value.id = newVal?.id
+        }
    },
    {
        immediate: true,
@ -314,17 +364,4 @@ onBeforeUnmount(() => {
        clearInterval(isCurrentPosition.value)
    }
 })
-
-watch(
-    () => deviceInfo.value,
-    (newVal) => {
-        if (newVal.puId) {
-            handleRobotAction(
-                Math.ceil(markerParams.value.xCount),
-                Math.ceil(markerParams.value.yCount),
-                deviceInfo.value?.puId,
-            )
-        }
-    },
-)
 </script>
--- a/src/views/home/components/modal-content/inspection-task.vue
+++ b/src/views/home/components/modal-content/inspection-task.vue
@ -24,13 +24,14 @@
                </n-button>
            </n-form>

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

            <div style="margin-top: 10px; display: flex; justify-content: flex-end">
+                <span>共{{ total }}条</span>
                <n-pagination
                    v-if="total > 0"
                    show-size-picker
-                    :page-count="total"
+                    :item-count="total"
                    :page-sizes="[10, 20, 30, 50]"
                    v-model:page="queryParams.pageNum"
                    v-model:page-size="queryParams.pageSize"
@ -42,25 +43,33 @@

 <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'
+import { ref, watch } from 'vue'
+import { NButton, NSwitch, useMessage, useDialog } from 'naive-ui'
+import {
+    getTaskListApi,
+    updateTaskEnableApi,
+    handleRobotActionApi,
+    deleteTaskApi,
+} from '@/api/home'

 const emits = defineEmits(['onHandleCloseModal', 'onHandleAddInspectionTask'])
-const modalTitle = ref('巡视任务') // 弹框标题
-const addOrEditVisible = ref(false) // 新增或编辑弹框
-const addOrEditTitle = ref('新增巡视任务') // 新增或编辑弹框标题
 const total = ref(0)
+const modalTitle = ref('巡视任务') // 弹框标题
 const message = useMessage()
+const dialog = useDialog()
+const props = defineProps({
+    isChange: {
+        type: Object,
+        default: () => ({
+            is_change: 'error',
+        }),
+    },
+})

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

 const btnList = [
@ -102,11 +111,7 @@ const columns = ref([
        key: 'robotName',
        align: 'center',
    },
-    // {
-    //     title: '地盘名称',
-    //     key: 'age',
-    //     align: 'center',
-    // },
+
    {
        title: '任务频次',
        key: 'count',
@ -147,7 +152,7 @@ const columns = ref([
        render(row) {
            return h(NSwitch, {
                value: row.enable == 1 ? true : false,
-                onChange: (value) => onHandleSwitch(row, value),
+                'onUpdate:value': (value) => onHandleSwitch(row, value),
            })
        },
    },
@ -157,62 +162,60 @@ const columns = ref([
        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',
+            const buttonS = btnList
+                .filter((btn) => {
+                    // 根据条件过滤按钮
+                    switch (btn.btnType) {
+                        case 1: // 编辑按钮 - 总是显示
+                            return true
+                        case 2:
+                            return row.taskStatus == 1 && row.enable == 1
+                        case 3: // 下发 - 只在任务未开始时显示
+                            return row.enable == 1
+                        case 4: // 删除 - 只在任务未开始时显示
+                            return true
+                    }
+                })
+                .map((btn) => {
+                    return h(
+                        NButton,
+                        {
+                            size: 'small',
+                            type: btn.type,
+                            style: {
+                                marginRight: '4px',
+                            },
+                            onClick: () => onHandleBtn(row, btn.btnType),
                        },
-                    },
-                    { default: () => btn.label },
-                )
-            })
+                        { 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 tableData = ref([])

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

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

 getTaskList()

 // 按钮操作组
 const onHandleBtn = (row, type) => {
-    console.log(row, type)
    // 1. 编辑 2. 立即执行 3. 下发 4. 删除
    switch (type) {
        case 1:
@ -227,14 +230,18 @@ const onHandleBtn = (row, type) => {
        case 4:
            onHandleDelete(row)
            break
+        case 5:
+            onHandleStop(row)
+            break
    }
 }

 // 编辑
 const onHandleEditTable = (row) => {
-    console.log(row)
-    addOrEditVisible.value = true
-    addOrEditTitle.value = '编辑巡视任务'
+    emits('onHandleAddInspectionTask', {
+        type: '编辑',
+        id: row.id,
+    })
 }

 // 立即执行
@ -244,12 +251,10 @@ const onHandleImmediateExecution = async (row) => {
        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,
@ -265,8 +270,26 @@ const onHandleSend = async (row) => {
 }

 // 删除
-const onHandleDelete = (row) => {
-    console.log(row)
+const onHandleDelete = async (row) => {
+    dialog.success({
+        title: '温馨提示',
+        content: '确定要删除该任务吗？',
+        positiveText: '确定',
+        negativeText: '取消',
+        draggable: true,
+        onPositiveClick: async () => {
+            const { data: res } = await deleteTaskApi({
+                id: row.id,
+                puid: row.puid,
+            })
+
+            if (res.data.code == 200) {
+                message.success('删除成功')
+                getTaskList()
+            }
+        },
+        onNegativeClick: () => {},
+    })
 }

 // 关闭弹框外层
@ -274,14 +297,8 @@ 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,
@ -295,6 +312,16 @@ const onHandleSwitch = async (row, value) => {
        message.error('启动失败')
    }
 }
+
+watch(
+    props.isChange,
+    (newVal) => {
+        if (newVal.is_change === 'success') {
+            getTaskList()
+        }
+    },
+    { immediate: true },
+)
 </script>

 <style lang="scss" scoped>
--- a/src/views/home/components/modal-content/preset-setting.vue
+++ b/src/views/home/components/modal-content/preset-setting.vue
@ -423,6 +423,7 @@ const handleModifyPoint = () => {
            markerName: point.markerName,
            markerAngle: point.markerAngle,
            markerPreset: point.markerPreset,
+            id: point.id,
        }
        emits('onHandleAddMarker', markerInfo)
    }
--- a/src/views/home/components/right-one.vue
+++ b/src/views/home/components/right-one.vue
@ -81,12 +81,57 @@
                />
            </n-flex>

+            <div class="tabs-btns">
+                <div
+                    class="tabs-btn"
+                    :key="item.name"
+                    v-for="(item, index) in tapsBtns"
+                    :class="{ active: activeIndex === index }"
+                    @click="onHandleTabs(index)"
+                >
+                    {{ item.name }}
+                </div>
+            </div>
+
            <n-form
                inline
                ref="formRef"
                size="small"
                label-placement="left"
                style="margin-top: 10px"
+                v-if="activeIndex === 0"
+            >
+                <n-form-item>
+                    <n-date-picker type="daterange" clearable style="width: 240px" />
+                </n-form-item>
+                <n-form-item>
+                    <n-input placeholder="输入途经点" clearable style="width: 240px" />
+                </n-form-item>
+                <n-form-item>
+                    <n-input placeholder="类型" clearable style="width: 240px" />
+                </n-form-item>
+
+                <n-button type="info"> 查询</n-button>
+                <n-button color="#6E90A9" style="margin-left: 8px"> 重置 </n-button>
+            </n-form>
+
+            <!-- 内容区域 -->
+            <n-data-table
+                :data="data"
+                :scroll-x="10"
+                flex-height
+                :columns="columns"
+                :style="{ height: `70%` }"
+                v-if="activeIndex === 0"
+            />
+
+            <n-form
+                inline
+                ref="formRef"
+                size="small"
+                label-placement="left"
+                style="margin-top: 10px"
+                v-if="activeIndex === 1"
            >
                <n-form-item>
                    <n-date-picker type="daterange" clearable style="width: 240px" />
@ -107,18 +152,21 @@

            <!-- 内容区域 -->
            <n-data-table
-                :columns="columns"
                :data="data"
                :scroll-x="10"
-                :style="{ height: `75%` }"
                flex-height
+                :columns="columns"
+                :style="{ height: `70%` }"
+                v-if="activeIndex === 1"
            />
+
            <div style="margin-top: 10px; display: flex; justify-content: flex-end">
                <n-pagination
-                    v-model:page="page"
-                    v-model:page-size="pageSize"
                    :page-count="100"
                    show-size-picker
+                    v-model:page="page"
+                    v-if="activeIndex === 0"
+                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                />
            </div>
@ -155,14 +203,15 @@
                label-placement="left"
                ref="addPersonFormRef"
                style="margin-top: 10px"
-                :model="addProjectPersonForm"
+                require-mark-placement="left"
+                :model="addOrEditPersonForm"
                :rules="addProjectPersonFormRules"
            >
-                <n-form-item label="姓名" path="name">
+                <n-form-item label="姓名" path="userName">
                    <n-input
                        clearable
                        placeholder="姓名"
-                        v-model:value="addProjectPersonForm.name"
+                        v-model:value="addOrEditPersonForm.userName"
                    />
                </n-form-item>

@ -170,7 +219,7 @@
                    <n-input
                        clearable
                        placeholder="联系方式"
-                        v-model:value="addProjectPersonForm.phone"
+                        v-model:value="addOrEditPersonForm.mobile"
                    />
                </n-form-item>
                <div class="name-phone-photo"></div>
@ -179,23 +228,25 @@
                    <n-input
                        clearable
                        placeholder="岗位工种"
-                        v-model:value="addProjectPersonForm.job"
+                        v-model:value="addOrEditPersonForm.workType"
                    />
                </n-form-item>
                <n-form-item label="年龄">
-                    <n-input
-                        clearable
-                        placeholder="年龄"
-                        v-model:value="addProjectPersonForm.age"
-                    />
+                    <n-input clearable placeholder="年龄" v-model:value="addOrEditPersonForm.age" />
+                </n-form-item>
+                <n-form-item label="性别">
+                    <n-radio-group v-model:value="addOrEditPersonForm.sex">
+                        <n-radio value="1">男</n-radio>
+                        <n-radio value="2">女</n-radio>
+                    </n-radio-group>
                </n-form-item>

-                <n-form-item label="人脸照片" prop="facePhoto">
+                <n-form-item label="人脸照片" path="facePhoto">
                    <n-upload
                        :default-upload="false"
                        list-type="image-card"
                        @preview="handlePreview"
-                        v-model:file-list="addProjectPersonForm.facePhoto"
+                        v-model:file-list="addOrEditPersonForm.facePhoto"
                    >
                    </n-upload>

@ -213,28 +264,40 @@
 </template>

 <script setup>
-import { NTag, NImage } from 'naive-ui'
+import { NTag, NImage, useMessage } from 'naive-ui'
 import TitleBackground from '@/components/TitleBackground/index.vue'
 import { ref, onMounted, onUpdated, nextTick, h } from 'vue'
+import { addPersonApi, getPersonListApi } from '@/api/home'

 const morePanelVisible = ref(false) // 更多数据弹框
 const addPersonPanelVisible = ref(false) // 新增项目部人员弹框
 const addPersonFormRef = ref(null) // 新增项目部人员表单
 const contentContainer = ref(null) // 人员动态内容区域
 const shouldScroll = ref(false) // 是否需要滚动
-
-// 新增项目部人员数据源
-const addProjectPersonForm = ref({
-    name: '', // 姓名
-    phone: '', // 联系方式
+const activeIndex = ref(0) // 当前选中的tab
+const message = useMessage()
+const addOrEditPersonForm = ref({
+    userName: '', // 姓名
+    mobile: '', // 联系方式
    facePhoto: [], // 人脸照片
    age: '', // 年龄
-    job: '', // 工种
+    sex: '', // 性别
+    workType: '', // 工种
 })

+const tapsBtns = ref([
+    {
+        name: '人员动态',
+    },
+    {
+        name: '人员信息',
+    },
+])
+
 // 新增项目部人员表单验证规则
 const addProjectPersonFormRules = ref({
-    name: [{ required: true, message: '请输入姓名' }],
+    userName: [{ required: true, message: '请输入姓名' }],
+    mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }],
    facePhoto: [{ required: true, message: '请上传人脸照片' }],
 })

@ -365,13 +428,26 @@ const onHandleAddPerson = () => {

 // 保存新增项目部人员
 const onHandleSavePerson = () => {
-    console.log('保存新增项目部人员')
-
-    console.log(addProjectPersonForm.value)
-
-    addPersonFormRef.value.validate().then((valid) => {
+    addPersonFormRef.value.validate().then(async (valid) => {
        if (valid) {
-            console.log('保存新增项目部人员')
+            // 组装参数 定义一个formData
+            const formData = new FormData()
+
+            for (const key in addOrEditPersonForm.value) {
+                if (key === 'facePhoto') {
+                    formData.append('file', addOrEditPersonForm.value.facePhoto[0].file)
+                } else {
+                    formData.append(key, addOrEditPersonForm.value[key])
+                }
+            }
+            const { data: res } = await addPersonApi(formData)
+
+            if (res.code === 200) {
+                message.success('人员新增成功')
+                addPersonPanelVisible.value = false
+            } else {
+                message.error(res.message)
+            }
        }
    })
 }
@ -383,6 +459,10 @@ const handlePreview = (file) => {
    previewImageUrl.value = file.url
    showModal.value = true
 }
+
+const onHandleTabs = (index) => {
+    activeIndex.value = index
+}
 </script>

 <style lang="scss" scoped>
@ -474,7 +554,7 @@ const handlePreview = (file) => {

 .more-panel-card {
    width: 70%;
-    height: 75vh;
+    height: 90vh;
    display: flex;
    flex-direction: column;
    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
@ -489,7 +569,7 @@ const handlePreview = (file) => {

 .add-person-panel-card {
    width: 40%;
-    height: 50vh;
+    // height: 50vh;

    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
    background-size: 100% 100%;
@ -525,4 +605,24 @@ const handlePreview = (file) => {
        cursor: pointer;
    }
 }
+
+.tabs-btns {
+    display: flex;
+    margin: 8px 0;
+
+    .tabs-btn {
+        width: 100px;
+        height: 42px;
+        background-color: #1b4589;
+        color: #fff;
+        text-align: center;
+        line-height: 42px;
+        cursor: pointer;
+    }
+
+    .active {
+        background-color: #1090f0;
+        border-radius: 8px;
+    }
+}
 </style>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -100,7 +100,7 @@ const { baseWidth, baseHeight, scale } = useScale(appRef)
 const cameraNode_1 = ref({
    token: '',
    puid: '',
-    idx: 0,
+    idx: 1,
    stream: 0,
    name: '',
    operateType: 1,
@ -110,7 +110,7 @@ const cameraNode_1 = ref({
 const cameraNode_2 = ref({
    token: '',
    puid: '',
-    idx: 1,
+    idx: 0,
    stream: 0,
    name: '',
    operateType: 1,