From e8eafc514e92b5ca29bb4f0fa41a215619a47ab1 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 2 Jul 2025 18:09:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/center-two.vue      |  86 +++++---
 src/views/home/components/control-deck.vue    | 109 +++++++++-
 src/views/home/components/right-one.vue       | 116 +++++------
 .../home/components/right-two/taps-one.vue    | 189 +++++++++---------
 .../home/components/right-two/taps-three.vue  | 168 ++++++++++------
 .../home/components/right-two/taps-two.vue    |  72 ++++++-
 6 files changed, 484 insertions(+), 256 deletions(-)

diff --git a/src/views/home/components/center-two.vue b/src/views/home/components/center-two.vue
index a845dc2..7758c7d 100644
--- a/src/views/home/components/center-two.vue
+++ b/src/views/home/components/center-two.vue
@@ -114,33 +114,44 @@
 
             <!-- 内容区域 -->
             <div class="table-container" ref="tableContainerRef">
-                <!-- 分页 -->
-
                 <div
                     v-for="item in imgInnerList"
                     :key="item"
                     class="table-item"
-                    :style="{ width: tableItemWidth + 'px' }"
+                    v-if="imgInnerList.length > 0"
                 >
                     <n-image
                         :width="tableItemWidth"
-                        height="170"
+                        :height="tableItemHeight"
                         object-fit="cover"
                         class="item-image"
                         :src="imgPreviewUrl + item?.image"
                     />
                     <div class="table-item-title">
-                        <span>{{ item?.pointName }}</span>
-                        <span>{{ item?.taskTime }}</span>
+                        <span>{{ item.pointName || '-' }}</span>
+                        <span>{{ item.taskTime || '-' }}</span>
                     </div>
                 </div>
+
+                <div
+                    style="
+                        height: 100%;
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    "
+                    v-else
+                >
+                    <n-empty size="large" description="暂无数据"> </n-empty>
+                </div>
             </div>
 
             <div style="margin-top: 10px; display: flex; justify-content: flex-end">
                 <n-pagination
                     show-size-picker
                     :item-count="innerTotal"
-                    :page-sizes="[10, 20, 30, 40]"
+                    :page-sizes="[8, 16, 32, 64]"
                     @update:page="pageNumChange"
                     @update:page-size="pageSizeChange"
                     v-model:page="innerQueryParams.pageNum"
@@ -166,6 +177,7 @@ const imgWidth = ref(0)
 const tableItemWidth = ref(0)
 const marqueeOuterRef = ref(null)
 const tableContainerRef = ref(null)
+const tableItemHeight = ref(null)
 const imgOuterList = ref([]) // 一级页面数据
 const imgInnerList = ref([]) // 二级页面数据
 const innerTotal = ref(0)
@@ -232,7 +244,9 @@ const onHandleMore = () => {
     morePanelVisible.value = true
     nextTick(() => {
         const tableContainer = tableContainerRef.value
-        tableItemWidth.value = (tableContainer.clientWidth - 40) / 4
+
+        tableItemHeight.value = ((tableContainer.clientHeight - 10) / 2) * 0.68
+        tableItemWidth.value = (tableContainer.clientWidth - 30) / 4
         console.log(tableContainer.clientWidth, 'tableContainer')
         getImageInnerData()
     })
@@ -249,7 +263,7 @@ const onHandleReset = () => {
     ranger.value = null
     innerQueryParams.value = {
         page: 1,
-        pageSize: 10,
+        pageSize: 8,
         startTime: '',
         endTime: '',
         pointName: '',
@@ -289,7 +303,8 @@ onUnmounted(() => {
     .marquee-outer {
         flex: 1;
         width: 100%;
-        overflow: hidden;
+        overflow: auto;
+
         margin-top: 12px;
     }
 
@@ -393,7 +408,9 @@ onUnmounted(() => {
 
 .more-panel-card {
     width: 80%;
-    // height: 80vh;
+    height: 80vh;
+    display: flex;
+    flex-direction: column;
     background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
     background-size: 100% 100%;
 }
@@ -405,16 +422,32 @@ onUnmounted(() => {
 }
 
 .table-container {
-    // height: 75%;
-    // min-height: 50vh;
+    width: 100%;
+    height: 70%;
     display: flex;
     flex-wrap: wrap;
     color: #fff;
+    overflow: auto;
+    // 优化一下滚动条
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #6e90a9;
+    }
+
+    // 优化滚动条
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #6e90a9;
+    }
 
     .table-item {
         flex-shrink: 0;
-        // width: calc((100% - 30px) / 4);
-        // height: calc((100% - 20px) / 2);
+        width: calc((100% - 30px) / 4);
+        height: calc((100% - 20px) / 2);
         margin-right: 10px;
         margin-bottom: 10px;
         border-radius: 5px;
@@ -423,24 +456,13 @@ onUnmounted(() => {
         align-items: center;
         justify-content: space-between;
         overflow: hidden;
+        .item-image {
+            width: 100%;
+            height: 60px;
+            flex-shrink: 0;
 
-        // .item-image {
-        //     // width: 100%;
-        //     height: 150px;
-        //     flex-shrink: 0;
-
-        //     /* 确保Naive UI的n-image组件完全填充 */
-        //     :deep(.n-image) {
-        //         // width: 100%;
-        //         display: block;
-
-        //         img {
-        //             // width: 100%;
-        //             // height: v-bind(imageHeight);
-        //             object-fit: cover;
-        //         }
-        //     }
-        // }
+            /* 确保Naive UI的n-image组件完全填充 */
+        }
 
         .table-item-title {
             width: 100%;
diff --git a/src/views/home/components/control-deck.vue b/src/views/home/components/control-deck.vue
index 45810fa..b4c62d7 100644
--- a/src/views/home/components/control-deck.vue
+++ b/src/views/home/components/control-deck.vue
@@ -284,9 +284,10 @@
                         <img src="@/assets/home-imgs/control-3-voice.png" alt="" />
                         <div style="width: 60%">
                             <n-slider
-                                :default-value="50"
                                 :step="10"
+                                :default-value="50"
                                 :format-tooltip="formatTooltip"
+                                @update:value="handleChangeVolume"
                             />
                         </div>
                     </div>
@@ -317,7 +318,45 @@
         </n-grid>
     </div>
 
-    <n-modal v-model:show="selectPlayType"> 播放类型 </n-modal>
+    <n-modal v-model:show="selectPlayType">
+        <n-card
+            size="huge"
+            role="dialog"
+            aria-modal="true"
+            :bordered="false"
+            class="modal-container"
+        >
+            <n-form
+                ref="formRef"
+                size="small"
+                label-placement="left"
+                style="margin-top: 10px"
+                :model="playParams"
+            >
+                <n-form-item label="播放类型：">
+                    <n-radio-group v-model:value="playParams.playType" name="radiogroup">
+                        <n-space>
+                            <n-radio :value="0"> 循环播放 </n-radio>
+                            <n-radio :value="1"> 次数播放 </n-radio>
+                        </n-space>
+                    </n-radio-group>
+                </n-form-item>
+
+                <n-form-item label="播放次数：" v-if="playParams.playType === 1">
+                    <n-input-number
+                        v-model:value="playParams.playCount"
+                        placeholder="输入播放次数"
+                        :show-button="false"
+                    />
+                </n-form-item>
+
+                <n-button type="info" @click="handlePlayAudio"> 确定</n-button>
+                <n-button color="#6E90A9" style="margin-left: 8px" @click="selectPlayType = false">
+                    取消
+                </n-button>
+            </n-form>
+        </n-card>
+    </n-modal>
 </template>
 
 <script setup>
@@ -367,6 +406,12 @@ const selectPlayType = ref(false)
 
 const audioValue = ref('')
 const audioInfo = ref(null)
+
+const playParams = ref({
+    playType: 0,
+    playCount: 1,
+})
+
 const audioMimeTypes = ref(
     '.pcm,.wav,.aac,audio/wav,audio/x-wav,audio/x-aiff,audio/aac,audio/x-aac',
 )
@@ -427,12 +472,26 @@ const getAudioInfo = async () => {
     }
 }
 
-const handleChangeAudio = (e) => {
+const handleChangeAudio = async (e) => {
     // console.log(e, '选择音频操作')
     if (e === '播放') {
         // showPlayTypeDialog()
 
         selectPlayType.value = true
+    } else if (e === '删除') {
+    } else {
+        const { data: res } = await handleRobotActionApi({
+            puId: robotData.robotInfo?.puId,
+            type: '17',
+            enable: '0',
+            videoId: audioInfo.value?.id,
+        })
+
+        if (res.code == 200) {
+            message.success('已暂停')
+        } else {
+            message.error('暂停音频失败')
+        }
     }
 }
 
@@ -598,6 +657,41 @@ const getRobotBaseInfo = async () => {
     robotBaseInfo.value = res.data
 }
 
+// 确认播放
+const handlePlayAudio = async () => {
+    const loop = playParams.value.playType === 0 ? 0 : playParams.value.playCount
+    const { data: res } = await handleRobotActionApi({
+        puId: robotData.robotInfo?.puId,
+        type: '17',
+        loop,
+        enable: '1',
+        videoId: audioInfo.value?.id,
+    })
+
+    if (res.code == 200) {
+        message.success('播放音频成功')
+        selectPlayType.value = false
+    } else {
+        message.error('播放音频失败')
+    }
+}
+
+// 音量选择
+
+const handleChangeVolume = debounce(async (value) => {
+    const { data: res } = await handleRobotActionApi({
+        puId: robotData.robotInfo?.puId,
+        type: '18',
+        sound: value,
+        videoId: audioInfo.value?.id,
+    })
+    if (res.code == 200) {
+        message.success('音量调整成功')
+    } else {
+        message.error('音量调整失败')
+    }
+}, 1000)
+
 onMounted(async () => {
     const token = await getRobotTokenFn() // 获取设备token
     const device = await getRobotDeviceListFn() // 获取设备信息
@@ -899,4 +993,13 @@ onMounted(async () => {
 :deep(.n-slider .n-slider-rail) {
     background-color: #2d6098;
 }
+
+.modal-container {
+    height: 30vh;
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
+    background-size: 100% 100%;
+}
 </style>
diff --git a/src/views/home/components/right-one.vue b/src/views/home/components/right-one.vue
index ed499f8..977fcd6 100644
--- a/src/views/home/components/right-one.vue
+++ b/src/views/home/components/right-one.vue
@@ -344,7 +344,7 @@ const addPersonPanelVisible = ref(false) // 新增项目部人员弹框
 const addPersonFormRef = ref(null) // 新增项目部人员表单
 const contentContainer = ref(null) // 人员动态内容区域
 const shouldScroll = ref(false) // 是否需要滚动
-const activeIndex = ref(1) // 当前选中的tab
+const activeIndex = ref(0) // 当前选中的tab
 const message = useMessage()
 const dialog = useDialog()
 const outerUserList = ref([]) // 外侧一级列表数据
@@ -425,37 +425,6 @@ const tableColumns_1 = ref([
             return index + 1
         },
     },
-    {
-        title: '日期时间',
-        key: 'createTime',
-        align: 'center',
-    },
-    {
-        title: '动态图片',
-        key: 'dataImage',
-        align: 'center',
-        render(row) {
-            return h(NImage, {
-                width: '60px',
-                height: '60px',
-                src: imgPreviewUrl.value + row.dataImage,
-                fit: 'cover',
-            })
-        },
-    },
-    {
-        title: '人脸图片',
-        key: 'image',
-        align: 'center',
-        render(row) {
-            return h(NImage, {
-                width: '60px',
-                height: '60px',
-                src: imgPreviewUrl.value + row.image,
-                fit: 'cover',
-            })
-        },
-    },
     {
         title: '姓名',
         key: 'userName',
@@ -480,6 +449,37 @@ const tableColumns_1 = ref([
             return row.workType || '-'
         },
     },
+    {
+        title: '日期时间',
+        key: 'createTime',
+        align: 'center',
+    },
+    {
+        title: '动态图片',
+        key: 'dataImage',
+        align: 'center',
+        render(row) {
+            return h(NImage, {
+                width: '48px',
+                height: '48px',
+                src: imgPreviewUrl.value + row.dataImage,
+                fit: 'cover',
+            })
+        },
+    },
+    {
+        title: '人脸图片',
+        key: 'image',
+        align: 'center',
+        render(row) {
+            return h(NImage, {
+                width: '48px',
+                height: '48px',
+                src: imgPreviewUrl.value + row.image,
+                fit: 'cover',
+            })
+        },
+    },
 ])
 
 const innerQueryParams_1 = ref({
@@ -615,24 +615,7 @@ const tableColumns_2 = ref([
             return index + 1
         },
     },
-    {
-        title: '日期时间',
-        key: 'createTime',
-        align: 'center',
-    },
-    {
-        title: '人脸照片',
-        key: 'image',
-        align: 'center',
-        render(row) {
-            return h(NImage, {
-                width: '60px',
-                height: '60px',
-                src: imgPreviewUrl.value + row.image,
-                fit: 'cover',
-            })
-        },
-    },
+
     {
         title: '姓名',
         key: 'userName',
@@ -642,13 +625,14 @@ const tableColumns_2 = ref([
         },
     },
     {
-        title: '性别',
-        key: 'sex',
+        title: '工种',
+        key: 'workType',
         align: 'center',
         render(row) {
-            return row.sex == 1 ? '男' : '女' || '-'
+            return row.workType || '-'
         },
     },
+
     {
         title: '年龄',
         key: 'age',
@@ -657,14 +641,34 @@ const tableColumns_2 = ref([
             return row.age || '-'
         },
     },
+
     {
-        title: '工种',
-        key: 'workType',
+        title: '性别',
+        key: 'sex',
         align: 'center',
         render(row) {
-            return row.workType || '-'
+            return row.sex == 1 ? '男' : '女' || '-'
         },
     },
+    {
+        title: '人脸照片',
+        key: 'image',
+        align: 'center',
+        render(row) {
+            return h(NImage, {
+                width: '48px',
+                height: '48px',
+                src: imgPreviewUrl.value + row.image,
+                fit: 'cover',
+            })
+        },
+    },
+
+    {
+        title: '创建日期',
+        key: 'createTime',
+        align: 'center',
+    },
     {
         title: '操作',
         align: 'center',
diff --git a/src/views/home/components/right-two/taps-one.vue b/src/views/home/components/right-two/taps-one.vue
index b59f3d1..4f84b06 100644
--- a/src/views/home/components/right-two/taps-one.vue
+++ b/src/views/home/components/right-two/taps-one.vue
@@ -3,24 +3,34 @@
     <div class="taps-one-container">
         <n-form inline ref="formRef" size="small" label-placement="left">
             <n-form-item>
-                <n-date-picker type="daterange" clearable style="width: 240px" />
+                <n-date-picker
+                    clearable
+                    type="daterange"
+                    style="width: 240px"
+                    v-model:formatted-value="dateRange"
+                    formatted-value="['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss']"
+                />
             </n-form-item>
 
             <n-form-item>
-                <n-button type="info"> 查询 </n-button>
-                <n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
+                <n-button type="info" @click="getImagePageList"> 查询 </n-button>
+                <n-button color="#6E90A9" style="margin-left: 10px" @click="onHandleReset">
+                    重置
+                </n-button>
             </n-form-item>
         </n-form>
 
         <!-- 内容区域 -->
-        <n-data-table :columns="columns" :data="data" :style="{ height: `75%` }" flex-height />
+        <n-data-table :columns="columns" :data="tableData" :style="{ height: `75%` }" flex-height />
         <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
+                :item-count="total"
                 :page-sizes="[10, 20, 30, 40]"
+                @update:page="onChangePage"
+                @update:page-size="onChangePageSize"
+                v-model:page="queryParams.pageNum"
+                v-model:page-size="queryParams.pageSize"
             />
         </div>
     </div>
@@ -28,109 +38,90 @@
 
 <script setup>
 import { ref } from 'vue'
-import { NTag, NImage } from 'naive-ui'
+import { NImage } from 'naive-ui'
+import { getImagePageListApi } from '@/api/home'
 
-const page = ref(1)
-const pageSize = ref(10)
+const total = ref(0)
+const dateRange = ref(null)
+const imgPreviewUrl = ref('http://192.168.0.38:21999/robot')
 
 const columns = ref([
     {
-        title: '巡检日期',
-        key: 'age',
+        title: '序号',
+        key: 'index',
         align: 'center',
-    },
-    {
-        title: '巡检开始时间',
-        key: 'tags',
-        align: 'center',
-    },
-    {
-        title: '巡检结束时间',
-        key: 'age',
-        align: 'center',
-    },
-    {
-        title: '巡检图片',
-        key: 'tags',
-        align: 'center',
-        render(row) {
-            const tags = row.tags.map((tagKey) => {
-                return h(
-                    NImage,
-                    {
-                        width: '40px',
-                        height: '40px',
-                        src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
-                        fit: 'cover',
-                    },
-                    {
-                        default: () => tagKey,
-                    },
-                )
-            })
-            return tags
+        width: 60,
+        render(row, index) {
+            return index + 1
         },
     },
     {
-        title: '巡检时长',
-        key: 'age',
+        title: '巡检日期',
+        key: 'taskTime',
         align: 'center',
+        render(row) {
+            return row.taskTime || '-'
+        },
+    },
+    {
+        title: '点位名称',
+        key: 'pointName',
+        align: 'center',
+        render(row) {
+            return row.pointName || '-'
+        },
+    },
+
+    {
+        title: '巡检图片',
+        key: 'image',
+        align: 'center',
+        render(row) {
+            return h(NImage, {
+                width: '48px',
+                height: '48px',
+                src: imgPreviewUrl.value + row.image,
+                fit: 'cover',
+            })
+        },
     },
 ])
-const data = ref([
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-])
+const tableData = ref([])
+
+const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+    startDay: '',
+    endDay: '',
+})
+
+// 获取巡检次数数据
+const getImagePageList = async () => {
+    const [startDay, endDay] = dateRange?.value || []
+    queryParams.value.startDay = startDay || ''
+    queryParams.value.endDay = endDay || ''
+    const { data: res } = await getImagePageListApi(queryParams.value)
+    tableData.value = res?.rows
+    total.value = res?.total
+}
+
+const onChangePage = (page) => {
+    queryParams.value.pageNum = page
+    getImagePageList()
+}
+
+const onChangePageSize = (pageSize) => {
+    queryParams.value.pageSize = pageSize
+    getImagePageList()
+}
+
+const onHandleReset = () => {
+    dateRange.value = null
+    queryParams.value.pageNum = 1
+    queryParams.value.pageSize = 10
+    getImagePageList()
+}
+getImagePageList()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/home/components/right-two/taps-three.vue b/src/views/home/components/right-two/taps-three.vue
index 75b2a72..614c3d5 100644
--- a/src/views/home/components/right-two/taps-three.vue
+++ b/src/views/home/components/right-two/taps-three.vue
@@ -2,25 +2,37 @@
     <!-- 人员动态弹框内 taps栏第三个巡检次数 -->
     <div class="taps-three-container">
         <n-form inline ref="formRef" size="small" label-placement="left">
-            <n-form-item>
+            <!-- <n-form-item>
                 <n-date-picker type="daterange" clearable style="width: 240px" />
+            </n-form-item> -->
+            <n-form-item>
+                <n-input
+                    clearable
+                    style="width: 240px"
+                    placeholder="输入途经点"
+                    v-model:value="queryParams.pointName"
+                />
             </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-input
+                    clearable
+                    placeholder="比对结果"
+                    style="width: 240px"
+                    v-model:value="queryParams.status"
+                />
             </n-form-item>
 
             <n-form-item>
-                <n-button type="info"> 查询 </n-button>
-                <n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
+                <n-button type="info" @click="getImagePageList"> 查询 </n-button>
+                <n-button color="#6E90A9" style="margin-left: 10px" @click="onHandleReset">
+                    重置
+                </n-button>
             </n-form-item>
         </n-form>
 
         <!-- 内容区域 -->
         <n-data-table
-            :data="data"
+            :data="tableData"
             flex-height
             :columns="columns"
             :scroll-x="10"
@@ -28,11 +40,13 @@
         />
         <div style="margin-top: 10px; display: flex; justify-content: flex-end">
             <n-pagination
-                :page-count="100"
                 show-size-picker
-                v-model:page="page"
-                v-model:page-size="pageSize"
+                :item-count="total"
                 :page-sizes="[10, 20, 30, 40]"
+                @update:page="onChangePage"
+                @update:page-size="onChangePageSize"
+                v-model:page="queryParams.pageNum"
+                v-model:page-size="queryParams.pageSize"
             />
         </div>
     </div>
@@ -40,93 +54,131 @@
 
 <script setup>
 import { ref } from 'vue'
-import { NTag, NImage } from 'naive-ui'
-
-const page = ref(1)
-const pageSize = ref(10)
+import { NImage } from 'naive-ui'
+import { getImagePageListApi } from '@/api/home'
+const total = ref(0)
+const tableData = ref([])
+const imgPreviewUrl = ref('http://192.168.0.38:21999/robot')
+const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+    pointName: '',
+    status: '',
+    type: 996,
+})
 
 const columns = ref([
     {
-        title: '途经点',
-        key: 'age',
+        title: '序号',
+        key: 'index',
         align: 'center',
+        width: 60,
+        render(row, index) {
+            return index + 1
+        },
+    },
+    {
+        title: '途经点',
+        key: 'pointName',
+        align: 'center',
+        render(row) {
+            return row.pointName || '-'
+        },
     },
     {
         title: '比对时间',
-        key: 'tags',
+        key: 'taskTime',
         align: 'center',
+        render(row) {
+            return row.taskTime || '-'
+        },
     },
     {
         title: '第一张巡检照片',
-        key: 'tags',
+        key: 'image',
         align: 'center',
         render(row) {
-            const tags = row.tags.map((tagKey) => {
-                return h(
-                    NImage,
-                    {
-                        width: '40px',
-                        height: '40px',
-                        src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
-                        fit: 'cover',
-                    },
-                    {
-                        default: () => tagKey,
-                    },
-                )
+            return h(NImage, {
+                width: '48px',
+                height: '48px',
+                src: imgPreviewUrl.value + row.image,
+                fit: 'cover',
             })
-            return tags
         },
     },
     {
         title: '上一次巡检照片',
-        key: 'tags',
+        key: 'lastImage',
         align: 'center',
         render(row) {
-            const tags = row.tags.map((tagKey) => {
-                return h(
-                    NImage,
-                    {
-                        width: '40px',
-                        height: '40px',
-                        src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
-                        fit: 'cover',
-                    },
-                    {
-                        default: () => tagKey,
-                    },
-                )
+            return h(NImage, {
+                width: '48px',
+                height: '48px',
+                src: imgPreviewUrl.value + row.lastImage,
+                fit: 'cover',
             })
-            return tags
         },
     },
     {
         title: '比对结果',
-        key: 'age',
+        key: 'status',
         align: 'center',
+        render(row) {
+            return row.status || '-'
+        },
     },
     {
         title: '第一张巡检照片拍摄时间',
-        key: 'age',
+        key: 'createTime',
         align: 'center',
+        render(row) {
+            return row.createTime || '-'
+        },
     },
     {
         title: '上一次巡检照片拍摄时间',
-        key: 'age',
+        key: 'lastTime',
         align: 'center',
+        render(row) {
+            return row.lastTime || '-'
+        },
     },
     {
         title: '相似度',
-        key: 'age',
+        key: 'similarity',
         align: 'center',
+        render(row) {
+            return parseFloat(row?.similarity || 0) + '%'
+        },
     },
 ])
-const data = ref([
-    {
-        age: '2025-06-01 10:00:00',
-        tags: ['nice'],
-    },
-])
+
+// 获取巡检次数数据
+const getImagePageList = async () => {
+    const { data: res } = await getImagePageListApi(queryParams.value)
+    tableData.value = res?.rows
+    total.value = res?.total
+}
+
+const onChangePage = (page) => {
+    queryParams.value.pageNum = page
+    getImagePageList()
+}
+
+const onChangePageSize = (pageSize) => {
+    queryParams.value.pageSize = pageSize
+    getImagePageList()
+}
+
+const onHandleReset = () => {
+    queryParams.value.pageNum = 1
+    queryParams.value.pageSize = 10
+    queryParams.value.pointName = ''
+    queryParams.value.status = ''
+    getImagePageList()
+}
+
+getImagePageList()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/home/components/right-two/taps-two.vue b/src/views/home/components/right-two/taps-two.vue
index 7d27c75..15acb04 100644
--- a/src/views/home/components/right-two/taps-two.vue
+++ b/src/views/home/components/right-two/taps-two.vue
@@ -3,28 +3,48 @@
     <div class="taps-two-container">
         <div class="table-container" ref="tableContainerRef">
             <!-- 分页 -->
-            <div v-for="item in 7" :key="item" class="table-item">
+            <div
+                v-for="item in tableData"
+                :key="item"
+                class="table-item"
+                v-if="tableData.length > 0"
+            >
                 <n-image
                     :width="imageWidth"
                     :height="imageHeight"
                     object-fit="cover"
                     class="item-image"
-                    src="https://img1.baidu.com/it/u=3294211986,2810142789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
+                    :src="imgPreviewUrl + item.image"
                 />
                 <div class="table-item-title">
-                    <span>途经点</span>
-                    <span>2025-06-01 10:00:00</span>
+                    <span>{{ item.pointName || '-' }}</span>
+                    <span>{{ item.taskTime || '-' }}</span>
                 </div>
             </div>
+
+            <div
+                style="
+                    height: 100%;
+                    width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                "
+                v-else
+            >
+                <n-empty size="large" description="暂无数据"> </n-empty>
+            </div>
         </div>
 
         <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
-                :page-sizes="[10, 20, 30, 40]"
+                :item-count="total"
+                :page-sizes="[8, 16, 32, 64]"
+                @update:page="onChangePage"
+                @update:page-size="onChangePageSize"
+                v-model:page="queryParams.pageNum"
+                v-model:page-size="queryParams.pageSize"
             />
         </div>
     </div>
@@ -32,9 +52,18 @@
 
 <script setup>
 import { onMounted } from 'vue'
+import { getImagePageListApi } from '@/api/home'
+
 const tableContainerRef = ref(null)
 const imageHeight = ref(0)
 const imageWidth = ref(0)
+const imgPreviewUrl = ref('http://192.168.0.38:21999/robot')
+const total = ref(0)
+const tableData = ref([])
+const queryParams = ref({
+    pageNum: 1,
+    pageSize: 8,
+})
 
 onMounted(() => {
     const tableContainer = tableContainerRef.value
@@ -43,6 +72,25 @@ onMounted(() => {
         imageWidth.value = (tableContainer.clientWidth - 30) / 4
     }
 })
+
+// 获取巡检次数数据
+const getImagePageList = async () => {
+    const { data: res } = await getImagePageListApi(queryParams.value)
+    tableData.value = res?.rows
+    total.value = res?.total
+}
+
+const onChangePage = (page) => {
+    queryParams.value.pageNum = page
+    getImagePageList()
+}
+
+const onChangePageSize = (pageSize) => {
+    queryParams.value.pageSize = pageSize
+    getImagePageList()
+}
+
+getImagePageList()
 </script>
 
 <style lang="scss" scoped>
@@ -57,6 +105,14 @@ onMounted(() => {
     display: flex;
     flex-wrap: wrap;
     color: #fff;
+    overflow: auto;
+    // 优化一下滚动条
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #6e90a9;
+    }
 
     .table-item {
         flex-shrink: 0;