133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
Vue
<template>
|
|
<!-- 人员动态弹框内 taps栏第一个巡检次数 -->
|
|
<div class="taps-one-container">
|
|
<n-form inline ref="formRef" size="small" label-placement="left">
|
|
<n-form-item>
|
|
<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" @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="tableData" :style="{ height: `75%` }" flex-height />
|
|
<div style="margin-top: 10px; display: flex; justify-content: flex-end">
|
|
<n-pagination
|
|
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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { NImage } from 'naive-ui'
|
|
import { getImagePageListApi } from '@/api/home'
|
|
|
|
const total = ref(0)
|
|
const dateRange = ref(null)
|
|
const imgPreviewUrl = ref('http://192.168.0.38:21999/robot')
|
|
|
|
const columns = ref([
|
|
{
|
|
title: '序号',
|
|
key: 'index',
|
|
align: 'center',
|
|
width: 60,
|
|
render(row, index) {
|
|
return index + 1
|
|
},
|
|
},
|
|
{
|
|
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 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>
|
|
.taps-one-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|