新增点位以及点位列表等接口调试

.env.development

@@ -3,5 +3,5 @@ VITE_APP_content = 机器人
 # 请求的base api
 VITE_APP_baseApiURL = https://s.dumogu.top/api
 # 路由的base api
-VITE_APP_routeBasePath = /base-naive-ui
+VITE_APP_routeBasePath = /
 VITE_APP_biuldBase = /

.env.production

@@ -1,7 +1,7 @@
 VITE_APP_name = 机器人 - 大屏
 VITE_APP_content = 机器人
 # 请求的base api
-VITE_APP_baseApiURL = /api
+VITE_APP_baseApiURL = /robot-screen-api
 # 路由的base api
-VITE_APP_routeBasePath = /base-naive-ui
+VITE_APP_routeBasePath = /robot-screen-ui
-VITE_APP_biuldBase = /base-naive-ui
+VITE_APP_biuldBase = /robot-screen-ui

src/api/home.js

@@ -1,15 +1,25 @@
 import { service } from '@/http/request'
 // 获取token
 export const getTokenApi = (data) => {
-    return service.post('/api/getToken', data)
+    return service.post('/robot-screen-api/getToken', data)
 }
 
 // 获取设备信息
 export const getDeviceInfoApi = (data) => {
-    return service.post('/api/robot/sbdUser/getDeviceList', data)
+    return service.post('/robot-screen-api/robot/sbdUser/getDeviceList', data)
 }
 
 // 操作机器人行动接口
 export const handleRobotActionApi = (data) => {
-    return service.post('/api/robot/instruct/sedXml', data)
+    return service.post('/robot-screen-api/robot/instruct/sedXml', data)
+}
+
+// 新增巡视点位接口
+export const addMarkerApi = (data) => {
+    return service.post('/robot-screen-api/robot/instruct/addPoint', data)
+}
+
+// 获取全部已经添加的点位
+export const getMarkerListAllApi = (data) => {
+    return service.post('/robot-screen-api/robot/instruct/getPointList', data)
 }

src/router/index.js

@@ -181,8 +181,8 @@ export const constantRoutes = [
 ]
 
 const router = createRouter({
-    // history: createWebHistory(import.meta.env.VITE_APP_routeBasePath),
+    history: createWebHistory(import.meta.env.VITE_APP_routeBasePath),
-    history: createWebHistory(),
+    // history: createWebHistory(),
     routes: constantRoutes,
 })
 

src/style/naiveUi.scss

@@ -98,3 +98,16 @@
 .n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-label {
     background-color: #1d3861
 }
+
+.n-upload-dragger {
+    background-color: #1d3861;
+    border: 1px dashed #1090f0;
+}
+
+.n-upload-trigger.n-upload-trigger--image-card .n-base-icon {
+    color: #fff;
+}
+
+.n-data-table .n-data-table-td {
+    border-bottom: none;
+}

src/utils/getRobotInfo.js

@@ -53,11 +53,12 @@ export const getRobotMapInfoFn = async (puId) => {
             type: 4,
         })
         if (res.code === 200) {
-            const { Data, Height, Width } = res.data
+            const { Data, Height, Width, Name } = res.data
             const mapInfo = {
                 mapBase64: 'data:image/png;base64,' + Data,
                 mapWidth: Width,
                 mapHeight: Height,
+                mapName: Name,
             }
             robotData.setMapInfo(mapInfo)
             return mapInfo

src/views/home/components/modal-content/add-or-edit-marker-form.vue

@@ -127,11 +127,17 @@
 import DialogModal from '@/components/DialogModal/index.vue'
 import FlvPlayer from '@/components/FlvPlayer/index.vue'
 import ControlDeck from './control-deck.vue'
-import { watch, ref, onMounted } from 'vue'
+import { useMessage } from 'naive-ui'
-import { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo'
+import { watch, ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { getRobotTokenFn, getRobotDeviceListFn, getRobotMapInfoFn } from '@/utils/getRobotInfo'
+import { handleRobotActionApi, addMarkerApi } from '@/api/home'
+
+const message = useMessage()
 
 const deviceToken = ref('')
-const deviceInfo = ref({})
+const deviceInfo = ref(null)
+
+const isCurrentPosition = ref(null)
 
 const emits = defineEmits(['onHandleCloseAddMarkerModal', 'onHandleConfirm'])
 const presetOptions = ref([
@@ -155,6 +161,11 @@ const markerParams = ref({
     markerPreset: '', // 摄像头预置位
     xCount: '', // 像素坐标 真实数据
     yCount: '', // 像素坐标 真实数据
+    PTZ_zoom: '',
+    mapId: '',
+    pointName: '',
+    PTZ_x: '',
+    PTZ_y: '',
 })
 const props = defineProps({
     markerInfo: {
@@ -166,16 +177,93 @@ const onHandleCloseAddModal = () => {
     emits('onHandleCloseAddMarkerModal')
 }
 
+// 根据X 和 Y 指令机器人去指定位置
+
+const handleRobotAction = async (x, y, puId) => {
+    console.log(x, y, puId, 'x, y, puId')
+    const { data: res } = await handleRobotActionApi({
+        x,
+        y,
+        type: '12',
+        speed: 100,
+        puId,
+    })
+
+    if (res.code == 200) {
+        isCurrentPosition.value = setInterval(async () => {
+            // 判断两个位置是否一致 如误差在10个像素内 则认为到达指定位置
+            const { x1, y1, PTZ_x, PTZ_y, PTZ_zoom, Robot_theta } = await getRobotCurrentPosition(
+                puId,
+            )
+            console.log(x, y, '指定位置x1, 指定y1')
+            console.log(x1, y1, '当前位置x1, 当前y1')
+            if (Math.abs(x1 - x) < 2 && Math.abs(y1 - y) < 2) {
+                console.log('已经到达指定位置')
+
+                markerParams.value.xCount = x1
+                markerParams.value.yCount = y1
+                markerParams.value.PTZ_x = PTZ_x
+                markerParams.value.PTZ_y = PTZ_y
+                markerParams.value.markerAngle = Robot_theta
+                markerParams.value.PTZ_zoom = PTZ_zoom
+
+                clearInterval(isCurrentPosition.value)
+            }
+        }, 2000)
+    }
+
+    // console.log(res, 'res机器人正在去往指定地点')
+}
+
+// 获取机器人当前的位置
+const getRobotCurrentPosition = async (puId) => {
+    const { data: res } = await handleRobotActionApi({
+        puId,
+        type: '2',
+    })
+
+    const { Robot_x, Robot_y, PTZ_x, PTZ_y, PTZ_zoom, Robot_theta } = res?.data
+    return {
+        x1: Robot_x,
+        y1: Robot_y,
+        PTZ_x,
+        PTZ_y,
+        PTZ_zoom,
+        Robot_theta,
+    }
+}
+
 // 确认按钮
-const onHandleConfirm = () => {
+const onHandleConfirm = async () => {
-    emits('onHandleConfirm', markerParams.value)
+    // emits('onHandleConfirm', markerParams.value)
+
+    // 组装参数
+    const { PTZ_zoom, markerAngle, PTZ_x, PTZ_y, xCount, yCount, mapId, markerName } =
+        markerParams.value
+
+    const addMarkerParams = {
+        ptzz: PTZ_zoom,
+        zheta: markerAngle,
+        ptzx: PTZ_x,
+        ptzy: PTZ_y,
+        positionX: xCount,
+        positionY: yCount,
+        mapId,
+        pointName: markerName,
+    }
+    const { data: res } = await addMarkerApi(addMarkerParams)
+
+    if (res.code == 200) {
+        message.success('新增点位成功')
+        // onHandleCloseAddModal()
+    }
 }
 
 const onlyAllowNumber = (value) => !value || /^\d+$/.test(value)
 
 watch(
     () => props.markerInfo,
-    (newVal) => {
+    async (newVal) => {
         markerParams.value.type = newVal?.type
         markerParams.value.markerIndex = newVal?.markerIndex
         markerParams.value.markerX = Math.ceil(newVal?.markerX).toString()
@@ -195,5 +283,28 @@ watch(
 onMounted(async () => {
     deviceToken.value = await getRobotTokenFn()
     deviceInfo.value = await getRobotDeviceListFn()
+    const mapInfo = await getRobotMapInfoFn()
+    markerParams.value.mapId = mapInfo?.mapName
+
+    console.log(markerParams.value, 'markerParams.value', mapInfo)
 })
+
+onBeforeUnmount(() => {
+    if (isCurrentPosition.value) {
+        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>

src/views/home/components/modal-content/preset-setting.vue

@@ -83,6 +83,7 @@ import { NIcon } from 'naive-ui'
 import { throttle } from 'lodash'
 import { AddCircleOutline, RemoveCircleOutline } from '@vicons/ionicons5'
 import { getRobotDeviceListFn, getRobotMapInfoFn } from '@/utils/getRobotInfo'
+import { getMarkerListAllApi } from '@/api/home'
 
 const modalTitle = ref('预置位配置') // 模态框标题
 const mousePosition = ref(null) // 鼠标位置
@@ -462,6 +463,17 @@ const handlePointClick = (point, index) => {
     emits('onHandleAddMarker', markerInfo)
 }
 
+// 获取全部已经添加的点位
+const getMarkerListAll = async () => {
+    const { data: res } = await getMarkerListAllApi()
+
+    console.log(res, 'res全部点位--')
+    if (res.code == 200) {
+    }
+}
+
+getMarkerListAll()
+
 // 关闭模态框
 const onHandleCloseModal = () => {
     emits('onHandleCloseModal')

src/views/home/components/right-one.vue

@@ -81,7 +81,13 @@
                 />
             </n-flex>
 
-            <n-form inline ref="formRef" size="small" label-placement="left">
+            <n-form
+                inline
+                ref="formRef"
+                size="small"
+                label-placement="left"
+                style="margin-top: 10px"
+            >
                 <n-form-item>
                     <n-date-picker type="daterange" clearable style="width: 240px" />
                 </n-form-item>
@@ -100,7 +106,13 @@
             </n-form>
 
             <!-- 内容区域 -->
-            <n-data-table :columns="columns" :data="data" />
+            <n-data-table
+                :columns="columns"
+                :data="data"
+                :scroll-x="10"
+                :style="{ height: `75%` }"
+                flex-height
+            />
             <div style="margin-top: 10px; display: flex; justify-content: flex-end">
                 <n-pagination
                     v-model:page="page"
@@ -116,8 +128,8 @@
     <!-- 弹框内容 新增项目部人员 -->
     <n-modal v-model:show="addPersonPanelVisible">
         <n-card
-            :bordered="false"
             size="huge"
+            :bordered="false"
             role="dialog"
             aria-modal="true"
             class="add-person-panel-card"
@@ -138,89 +150,70 @@
             </n-flex>
 
             <n-form
-                ref="addPersonFormRef"
-                label-placement="left"
                 size="small"
                 label-width="80"
+                label-placement="left"
+                ref="addPersonFormRef"
                 style="margin-top: 10px"
+                :model="addProjectPersonForm"
+                :rules="addProjectPersonFormRules"
             >
-                <n-form-item label="姓名">
+                <n-form-item label="姓名" path="name">
-                    <n-input placeholder="姓名" clearable />
+                    <n-input
+                        clearable
+                        placeholder="姓名"
+                        v-model:value="addProjectPersonForm.name"
+                    />
                 </n-form-item>
 
                 <n-form-item label="联系方式">
-                    <n-input placeholder="联系方式" clearable />
+                    <n-input
+                        clearable
+                        placeholder="联系方式"
+                        v-model:value="addProjectPersonForm.phone"
+                    />
                 </n-form-item>
-                <div class="name-phone-photo">
+                <div class="name-phone-photo"></div>
-                    <!-- <div class="name">
-                        <n-form-item>
-                            <n-input placeholder="姓名" clearable />
-                        </n-form-item>
-                    </div>
-                    <div class="phone">
-                        <n-form-item>
-                            <n-input placeholder="姓名" clearable />
-                        </n-form-item>
-                    </div>
-                    <div class="photo">
-                        <n-form-item>
-                            <n-input placeholder="姓名" clearable />
-                        </n-form-item>
-                    </div> -->
-
-                    <!-- <div class="left">
-                      
-                    </div>
-
-                    <div class="right">
-                       
-                    </div> -->
-                </div>
 
                 <n-form-item label="岗位工种">
-                    <n-input placeholder="岗位工种" clearable />
+                    <n-input
+                        clearable
+                        placeholder="岗位工种"
+                        v-model:value="addProjectPersonForm.job"
+                    />
                 </n-form-item>
                 <n-form-item label="年龄">
-                    <n-input placeholder="年龄" clearable />
+                    <n-input
+                        clearable
+                        placeholder="年龄"
+                        v-model:value="addProjectPersonForm.age"
+                    />
                 </n-form-item>
 
-                <n-form-item label="人脸照片">
+                <n-form-item label="人脸照片" prop="facePhoto">
-                    <!-- <n-upload
-                        action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-                        :headers="{
-                            'naive-info': 'hello!',
-                        }"
-                        :data="{
-                            'naive-data': 'cool! naive!',
-                        }"
-                    >
-                        <img src="@/assets/home-imgs/upload-img.png" alt="" />
-                    </n-upload> -->
-
                     <n-upload
-                        action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+                        :default-upload="false"
-                        :default-file-list="previewFileList"
                         list-type="image-card"
                         @preview="handlePreview"
-                    />
+                        v-model:file-list="addProjectPersonForm.facePhoto"
-                    <n-modal
-                        preset="card"
-                        v-model:show="showModal"
-                        style="width: 600px"
-                        title="一张很酷的图片"
                     >
-                        <img :src="previewImageUrl" style="width: 100%" />
+                    </n-upload>
-                    </n-modal>
 
-                    <n-button type="info" style="width: 20%"> 保存 </n-button>
+                    <n-button type="info" style="width: 20%" @click="onHandleSavePerson">
+                        保存
+                    </n-button>
                 </n-form-item>
             </n-form>
         </n-card>
     </n-modal>
+
+    <n-modal preset="card" v-model:show="showModal" style="width: 600px" title="一张很酷的图片">
+        <img :src="previewImageUrl" style="width: 100%" />
+    </n-modal>
 </template>
 
 <script setup>
-import { NTag } from 'naive-ui'
+import { NTag, NImage } from 'naive-ui'
 import TitleBackground from '@/components/TitleBackground/index.vue'
 import { ref, onMounted, onUpdated, nextTick, h } from 'vue'
 
@@ -229,9 +222,28 @@ const addPersonPanelVisible = ref(false) // 新增项目部人员弹框
 const addPersonFormRef = ref(null) // 新增项目部人员表单
 const contentContainer = ref(null) // 人员动态内容区域
 const shouldScroll = ref(false) // 是否需要滚动
+
+// 新增项目部人员数据源
+const addProjectPersonForm = ref({
+    name: '', // 姓名
+    phone: '', // 联系方式
+    facePhoto: [], // 人脸照片
+    age: '', // 年龄
+    job: '', // 工种
+})
+
+// 新增项目部人员表单验证规则
+const addProjectPersonFormRules = ref({
+    name: [{ required: true, message: '请输入姓名' }],
+    facePhoto: [{ required: true, message: '请上传人脸照片' }],
+})
+
+const previewFileList = ref([])
+
 const page = ref(1)
 const pageSize = ref(10)
 
+// 列表表头数据源
 const columns = ref([
     {
         title: '日期时间',
@@ -245,13 +257,12 @@ const columns = ref([
         render(row) {
             const tags = row.tags.map((tagKey) => {
                 return h(
-                    NTag,
+                    NImage,
                     {
-                        style: {
+                        width: '60px',
-                            marginRight: '6px',
+                        height: '60px',
-                        },
+                        src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
-                        type: 'info',
+                        fit: 'cover',
-                        bordered: false,
                     },
                     {
                         default: () => tagKey,
@@ -277,11 +288,41 @@ const columns = ref([
         align: 'center',
     },
 ])
+
+// 列表数据源
 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'],
+    },
 ])
 
 // 计算是否需要滚动
@@ -321,6 +362,27 @@ const onHandleAddPerson = () => {
     console.log('新增项目部人员')
     addPersonPanelVisible.value = true
 }
+
+// 保存新增项目部人员
+const onHandleSavePerson = () => {
+    console.log('保存新增项目部人员')
+
+    console.log(addProjectPersonForm.value)
+
+    addPersonFormRef.value.validate().then((valid) => {
+        if (valid) {
+            console.log('保存新增项目部人员')
+        }
+    })
+}
+
+// 人脸照片预览
+const showModal = ref(false)
+const previewImageUrl = ref('')
+const handlePreview = (file) => {
+    previewImageUrl.value = file.url
+    showModal.value = true
+}
 </script>
 
 <style lang="scss" scoped>
@@ -413,6 +475,8 @@ const onHandleAddPerson = () => {
 .more-panel-card {
     width: 70%;
     height: 75vh;
+    display: flex;
+    flex-direction: column;
     background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
     background-size: 100% 100%;
 }
@@ -426,6 +490,7 @@ const onHandleAddPerson = () => {
 .add-person-panel-card {
     width: 40%;
     height: 50vh;
+
     background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
     background-size: 100% 100%;
 }

src/views/home/components/right-two/index.vue

@@ -58,7 +58,9 @@
                 </div>
             </div>
 
+            <div class="taps-content">
                 <component :is="componentMap[currentComponent]" />
+            </div>
         </n-card>
     </n-modal>
 </template>
@@ -211,6 +213,8 @@ const onHandleTabs = (component, index) => {
 .more-panel-card {
     width: 80%;
     height: 80vh;
+    display: flex;
+    flex-direction: column;
     background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
     background-size: 100% 100%;
 }
@@ -240,4 +244,9 @@ const onHandleTabs = (component, index) => {
         border-radius: 8px;
     }
 }
+
+.taps-content {
+    width: 100%;
+    height: 80%;
+}
 </style>

src/views/home/components/right-two/taps-one.vue

@@ -1,4 +1,6 @@
 <template>
+    <!-- 人员动态弹框内 taps栏第一个巡检次数 -->
+    <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" />
@@ -11,7 +13,7 @@
         </n-form>
 
         <!-- 内容区域 -->
-    <n-data-table :columns="columns" :data="data" />
+        <n-data-table :columns="columns" :data="data" :style="{ height: `75%` }" flex-height />
         <div style="margin-top: 10px; display: flex; justify-content: flex-end">
             <n-pagination
                 v-model:page="page"
@@ -21,10 +23,12 @@
                 :page-sizes="[10, 20, 30, 40]"
             />
         </div>
+    </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import { NTag, NImage } from 'naive-ui'
 
 const page = ref(1)
 const pageSize = ref(10)
@@ -46,9 +50,26 @@ const columns = ref([
         align: 'center',
     },
     {
-        title: '巡检照片',
+        title: '巡检图片',
-        key: 'age',
+        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
+        },
     },
     {
         title: '巡检时长',
@@ -61,5 +82,60 @@ 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'],
+    },
 ])
 </script>
+
+<style lang="scss" scoped>
+.taps-one-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/home/components/right-two/taps-three.vue

@@ -1,4 +1,6 @@
 <template>
+    <!-- 人员动态弹框内 taps栏第三个巡检次数 -->
+    <div class="taps-three-container">
         <n-form inline ref="formRef" size="small" label-placement="left">
             <n-form-item>
                 <n-date-picker type="daterange" clearable style="width: 240px" />
@@ -17,7 +19,13 @@
         </n-form>
 
         <!-- 内容区域 -->
-    <n-data-table :columns="columns" :data="data" />
+        <n-data-table
+            :columns="columns"
+            :data="data"
+            :scroll-x="10"
+            :style="{ height: `75%` }"
+            flex-height
+        />
         <div style="margin-top: 10px; display: flex; justify-content: flex-end">
             <n-pagination
                 v-model:page="page"
@@ -27,10 +35,12 @@
                 :page-sizes="[10, 20, 30, 40]"
             />
         </div>
+    </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import { NTag, NImage } from 'naive-ui'
 
 const page = ref(1)
 const pageSize = ref(10)
@@ -48,13 +58,47 @@ const columns = ref([
     },
     {
         title: '第一张巡检照片',
-        key: 'age',
+        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
+        },
     },
     {
         title: '上一次巡检照片',
-        key: 'age',
+        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
+        },
     },
     {
         title: '比对结果',
@@ -84,3 +128,10 @@ const data = ref([
     },
 ])
 </script>
+
+<style lang="scss" scoped>
+.taps-three-container {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/home/components/right-two/taps-two.vue

@@ -1,10 +1,12 @@
 <template>
-    <div class="table-container">
+    <!-- 人员动态弹框内 taps栏第二个巡检次数 -->
+    <div class="taps-two-container">
+        <div class="table-container" ref="tableContainerRef">
             <!-- 分页 -->
-
             <div v-for="item in 7" :key="item" class="table-item">
                 <n-image
-                width="100%"
+                    :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"
@@ -25,13 +27,33 @@
                 :page-sizes="[10, 20, 30, 40]"
             />
         </div>
+    </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { onMounted } from 'vue'
+const tableContainerRef = ref(null)
+const imageHeight = ref(0)
+const imageWidth = ref(0)
+
+onMounted(() => {
+    const tableContainer = tableContainerRef.value
+    if (tableContainer) {
+        imageHeight.value = ((tableContainer.clientHeight - 10) / 2) * 0.68
+        imageWidth.value = (tableContainer.clientWidth - 30) / 4
+    }
+})
+</script>
 
 <style lang="scss" scoped>
+.taps-two-container {
+    width: 100%;
+    height: 100%;
+}
+
 .table-container {
-    height: 75%;
+    width: 100%;
+    height: 88%;
     display: flex;
     flex-wrap: wrap;
     color: #fff;
@@ -48,23 +70,12 @@
         align-items: center;
         justify-content: space-between;
         overflow: hidden;
-
         .item-image {
-            // width: 100%;
+            width: 100%;
-            height: 120px;
+            height: 60px;
             flex-shrink: 0;
 
             /* 确保Naive UI的n-image组件完全填充 */
-            :deep(.n-image) {
-                // width: 100%;
-                display: block;
-
-                img {
-                    // width: 100%;
-                    // height: v-bind(imageHeight);
-                    object-fit: cover;
-                }
-            }
         }
 
         .table-item-title {