bonus
/
on-site-robots-screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
BianLzhaoMin 2025-06-27 18:16:16 +08:00
parent 260dc6b942
commit 249ec024b5
13 changed files with 526 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -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 = /

6
.env.production
View File

@ -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_biuldBase = /base-naive-ui
VITE_APP_routeBasePath = /robot-screen-ui
VITE_APP_biuldBase = /robot-screen-ui

16
src/api/home.js
View File

@ -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)
}

4
src/router/index.js
View File

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

13
src/style/naiveUi.scss
View File

@ -97,4 +97,17 @@
.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;
}

3
src/utils/getRobotInfo.js
View File

@ -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

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

@ -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 { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo'
import { useMessage } from 'naive-ui'
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 = () => {
emits('onHandleConfirm', markerParams.value)
const onHandleConfirm = async () => {
// 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>

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

@ -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')

197
src/views/home/components/right-one.vue
View File

@ -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-input placeholder="姓名" clearable />
<n-form-item label="姓名" path="name">
<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">
<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>
<div class="name-phone-photo"></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-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-form-item label="人脸照片" prop="facePhoto">
<n-upload
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
:default-upload="false"
list-type="image-card"
@preview="handlePreview"
/>
<n-modal
preset="card"
v-model:show="showModal"
style="width: 600px"
title="一张很酷的图片"
v-model:file-list="addProjectPersonForm.facePhoto"
>
<img :src="previewImageUrl" style="width: 100%" />
</n-modal>
</n-upload>
<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: {
marginRight: '6px',
},
type: 'info',
bordered: false,
width: '60px',
height: '60px',
src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
fit: 'cover',
},
{
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%;
}

11
src/views/home/components/right-two/index.vue
View File

@ -58,7 +58,9 @@
</div>
</div>
<component :is="componentMap[currentComponent]" />
<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>

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

@ -1,30 +1,34 @@
<template>
<n-form inline ref="formRef" size="small" label-placement="left">
<n-form-item>
<n-date-picker type="daterange" clearable style="width: 240px" />
</n-form-item>
<!-- 人员动态弹框内 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" />
</n-form-item>
<n-form-item>
<n-button type="info"> 查询 </n-button>
<n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
</n-form-item>
</n-form>
<n-form-item>
<n-button type="info"> 查询 </n-button>
<n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
</n-form-item>
</n-form>
<!-- 内容区域 -->
<n-data-table :columns="columns" :data="data" />
<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]"
/>
<!-- 内容区域 -->
<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"
v-model:page-size="pageSize"
:page-count="100"
show-size-picker
: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: '巡检照片',
key: 'age',
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
},
},
{
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>

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

@ -1,36 +1,46 @@
<template>
<n-form inline ref="formRef" size="small" label-placement="left">
<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>
<!-- 人员动态弹框内 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" />
</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-form-item>
<n-button type="info"> 查询 </n-button>
<n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
</n-form-item>
</n-form>
<n-form-item>
<n-button type="info"> 查询 </n-button>
<n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
</n-form-item>
</n-form>
<!-- 内容区域 -->
<n-data-table :columns="columns" :data="data" />
<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]"
<!-- 内容区域 -->
<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"
v-model:page-size="pageSize"
:page-count="100"
show-size-picker
: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>

85
src/views/home/components/right-two/taps-two.vue
View File

@ -1,37 +1,59 @@
<template>
<div class="table-container">
<!-- 分页 -->
<div v-for="item in 7" :key="item" class="table-item">
<n-image
width="100%"
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"
/>
<div class="table-item-title">
<span>途经点</span>
<span>2025-06-01 10:00:00</span>
<!-- 人员动态弹框内 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="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"
/>
<div class="table-item-title">
<span>途经点</span>
<span>2025-06-01 10:00:00</span>
</div>
</div>
</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]"
/>
<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]"
/>
</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%;
height: 120px;
width: 100%;
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 {