by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 通行记录、车辆通行记录

Browse Source
This commit is contained in:
fyy
2025-08-27 23:47:35 +08:00
parent 5516e79b5d
commit 452e16ce2f
7 changed files with 542 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
apps/web-antd/src/views/property/resident/carPassRecordManagement/data.ts
View File

@@ -1,41 +1,12 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
import dayjs from 'dayjs';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'actionTime',
label: '通行时间',
},
{
component: 'Input',
fieldName: 'customerName',
label: '人员姓名',
},
{
component: 'Input',
fieldName: 'organFullPath',
label: '组织机构',
},
{
component: 'Input',
fieldName: 'doorName',
label: '门/电梯名称',
},
{
component: 'Input',
fieldName: 'deviceName',
label: '设备名称',
},
{
component: 'Select',
componentProps: {
options: getDictOptions('wy_txjllx'),
},
fieldName: 'recordType',
label: '记录类型',
fieldName: 'orderId',
label: '订单编号',
},
];
@@ -54,22 +25,31 @@ export const columns: VxeGridProps['columns'] = [
{
title: '订单编号',
field: 'orderId',
width: 100,
minWidth: 200,
},
{
title: '车场名称',
field: 'plName',
width: 100,
width: 'auto',
},
{
title: '停车类型',
field: 'carBusiType',
slots: {
default: ({ row }) => {
return renderDict(row.deviceType, 'wy_txjlsblb');
},
},
width: 100,
formatter: ({ cellValue }) => {
// 停车类型转换
// 10：临时车，11, 12, 13：月租车，其他：未知
switch (cellValue) {
case 10:
return '临时车';
case 11:
case 12:
case 13:
return '月租车';
default:
return '未知';
}
},
},
{
title: '车牌号',
@@ -80,6 +60,18 @@ export const columns: VxeGridProps['columns'] = [
title: '车辆类型',
field: 'carType',
width: 100,
formatter: ({ cellValue }) => {
switch (cellValue) {
case 1:
return '大型车';
case 2:
return '小型车';
case 3:
return '新能源车';
default:
return '未知';
}
},
},
{
title: '应收',
@@ -89,55 +81,99 @@ export const columns: VxeGridProps['columns'] = [
{
title: '实收',
field: 'orderActFee',
slots: {
default: ({ row }) => {
return renderDict(row.cardType, 'wy_txjlmklb');
},
},
width: 100,
},
{
title: '停车时长',
field: 'parkingDuration',
slots: {
default: ({ row }) => {
return renderDict(row.gatewayType, 'wy_txjlcrlx');
},
width: 150,
formatter: ({ cellValue }) => {
// 将秒数转换为友好的时间格式
if (!cellValue && cellValue !== 0) return '';
const totalSeconds = Number(cellValue);
if (isNaN(totalSeconds)) return cellValue;
// 计算天、小时、分钟和秒
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
// 格式化显示
let result = '';
if (days > 0) result += `${days}天`;
if (hours > 0) result += `${hours}小时`;
if (minutes > 0) result += `${minutes}分钟`;
if (seconds > 0 || result === '') result += `${seconds}秒`;
return result;
},
width: 100,
},
{
title: '进场时间',
field: 'parkInTime',
width: 100,
width: 150,
formatter: ({ cellValue }) => {
// 如果没有值，直接返回空字符串
if (!cellValue) return '';
// 使用 dayjs 格式化时间戳
// 如果是时间戳（数字或数字字符串）
if (typeof cellValue === 'number' || /^\d+$/.test(cellValue.toString())) {
return dayjs(Number(cellValue)).format('YYYY-MM-DD HH:mm:ss');
}
// 如果已经是日期字符串，尝试解析后格式化
const date = dayjs(cellValue);
if (date.isValid()) {
return date.format('YYYY-MM-DD HH:mm:ss');
}
// 如果无法解析，返回原始值
return cellValue;
},
},
{
title: '出场时间',
field: 'parkOutTime',
slots: {
default: ({ row }) => {
return renderDict(row.recordType, 'wy_txjllx');
},
},
width: 100,
formatter: ({ cellValue }) => {
// 如果没有值，直接返回空字符串
if (!cellValue) return '';
// 使用 dayjs 格式化时间戳
// 如果是时间戳（数字或数字字符串）
if (typeof cellValue === 'number' || /^\d+$/.test(cellValue.toString())) {
return dayjs(Number(cellValue)).format('YYYY-MM-DD HH:mm:ss');
}
// 如果已经是日期字符串，尝试解析后格式化
const date = dayjs(cellValue);
if (date.isValid()) {
return date.format('YYYY-MM-DD HH:mm:ss');
}
// 如果无法解析，返回原始值
return cellValue;
},
},
{
title: '备注',
field: 'remark',
slots: {
default: ({ row }) => {
return renderDict(row.recordType, 'wy_txjllx');
},
},
width: 100,
},
{
title: '状态',
field: 'parkState',
slots: {
default: ({ row }) => {
return renderDict(row.recordType, 'wy_txjllx');
},
formatter: ({ cellValue }) => {
switch (cellValue) {
case 10:
return '在场';
case 20:
return '离场';
}
},
width: 100,
},

201
apps/web-antd/src/views/property/resident/carPassRecordManagement/index.vue
View File

@@ -1,21 +1,72 @@
<script setup lang="ts">
import { onMounted,ref } from 'vue';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { Space } from 'ant-design-vue';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { commonDownloadExcel } from '#/utils/file/download';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns, querySchema } from './data';
import { getVisitorList } from '#/api/property/resident/passRecordManagement';
const token = ref('')
import recordDetailModal from './record-detail-modal.vue';
import { Radio } from 'ant-design-vue';
import type { RadioChangeEvent } from 'ant-design-vue';
const token = ref('');
const parkStates = ref('10');
// 外部登录接口：页面加载时请求
async function externalLoginOnLoad() {
try {
const response = await fetch(
'https://server.cqnctc.com:6081/web/oAuth/login',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
loginCode: 'zhfwzx',
loginPassword: 'nc123456',
}),
},
);
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
const result = await response.json();
// 检查登录是否成功
if (result?.data?.token) {
token.value = result.data.token;
// 将 token 存储到 sessionStorage 中
sessionStorage.setItem('token', token.value);
// try{
const response = await fetch(
`https://server.cqnctc.com:6081/web/oAuth/getUserInfo?token=${sessionStorage.getItem('token')}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
// Authorization: `Bearer ${sessionStorage.getItem('token')}`,
Accept: 'application/json, text/plain, */*',
},
},
);
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
const result2 = await response.json();
console.log(result2);
// }
}
} catch (error) {
console.error('External login error:', error);
}
}
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 120,
@@ -43,11 +94,69 @@ const gridOptions: VxeGridProps = {
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await getVisitorList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
// 修改：添加对token的使用，如果token存在则请求外部接口，否则使用原接口
console.log(1243);
sessionStorage.removeItem('token');
await externalLoginOnLoad();
console.log(23423310248);
if (token.value) {
try {
const response = await fetch(
'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
{
method: 'POST',
headers: {
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
'Content-Type': 'application/json',
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
Accept: 'application/json, text/plain, */*',
},
body: JSON.stringify({
// pageReq: {
// pageNum: page.currentPage,
// pageSize: page.pageSize,
// },
// parkStates: parkStates.value,
// parkOrderTypes: [100, 200, 201, 300, 500],
// plNos: ['PFN000000022', 'PFN000000012', 'PFN000000025'],
// terminalSource: 50,
// orderStates: [],
// orgId: 10012,
// ...formValues,
pageReq: {
pageNum: page.currentPage,
pageSize: page.pageSize,
},
plNos: ['PFN000000025', 'PFN000000022', 'PFN000000012'],
carNumber: null,
orgId: 10012,
parkStates: Number(parkStates.value),
orderStates: [],
parkOrderTypes: [100, 200, 201, 300, 500],
terminalSource: 50,
}),
},
);
// if (!response.ok) {
// throw new Error(
// `External API request failed: ${response.status}`,
// );
// }
const result = await response.json();
console.log(result);
// 根据返回数据结构调整
return {
rows: result.data.dataList || [],
total: result.data.pageTotals || 0,
};
} catch (error) {
console.error('External API request error:', error);
}
}
},
},
},
@@ -74,43 +183,36 @@ function handleDownloadExcel() {
// );
}
// 外部登录接口：页面加载时请求
async function externalLoginOnLoad() {
try {
const response = await fetch('https://server.cqnctc.com:6081/web/oAuth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
loginCode: 'zhfwzx',
loginPassword: 'nc123456',
}),
});
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
const result = await response.json();
if (result?.data?.token) {
token.value = result.data.token;
}
console.log('external login result:', result);
} catch (error) {
console.error('external login error:', error);
}
}
onMounted(() => {
externalLoginOnLoad();
// onMounted(() => {
// externalLoginOnLoad();
// });
const [RecordDetailModal, recordDetailModalApi] = useVbenModal({
connectedComponent: recordDetailModal,
});
async function handleInfo(row: any) {
recordDetailModalApi.setData({ data: row });
recordDetailModalApi.open();
}
// 切换视图模式
async function handleViewModeChange(e: RadioChangeEvent): Promise<void> {
parkStates.value = e.target.value;
await tableApi.query();
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable table-title="通行记录列表">
<template #toolbar-tools>
<template #toolbar-tools style="width: 100%">
<div style="margin-right: 20px">
<Radio.Group
v-model:value="parkStates"
@change="handleViewModeChange"
>
<Radio.Button value="10">在场</Radio.Button>
<Radio.Button value="20">离场</Radio.Button>
</Radio.Group>
</div>
<Space>
<a-button @click="handleDownloadExcel">
{{ $t('pages.common.export') }}
@@ -119,9 +221,10 @@ onMounted(() => {
</template>
<template #action="{ row }">
<Space>
<ghost-button> 查看 </ghost-button>
<ghost-button @click.stop="handleInfo(row)"> 查看 </ghost-button>
</Space>
</template>
</BasicTable>
<RecordDetailModal />
</Page>
</template>

256
apps/web-antd/src/views/property/resident/carPassRecordManagement/record-detail-modal.vue
View File

@@ -0,0 +1,256 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
import dayjs from 'dayjs';
// 格式化停车时长（将秒数转换为友好的时间格式）
function formatParkingDuration(seconds: number | string): string {
// 将秒数转换为友好的时间格式
if (!seconds && seconds !== 0) return '';
const totalSeconds = Number(seconds);
if (isNaN(totalSeconds)) return seconds as string;
// 计算天、小时、分钟和秒
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const secs = Math.floor(totalSeconds % 60);
// 格式化显示
let result = '';
if (days > 0) result += `${days}天`;
if (hours > 0) result += `${hours}小时`;
if (minutes > 0) result += `${minutes}分钟`;
if (secs > 0 || result === '') result += `${secs}秒`;
return result;
}
const emit = defineEmits<{ reload: [] }>();
const picture1 = ref('');
const detail = ref<any>();
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
// {
// initializedGetter: defaultFormValueGetter(formApi),
// currentGetter: defaultFormValueGetter(formApi),
// },
// );
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[70%]',
fullscreenButton: false,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { data } = modalApi.getData() as { data: any };
detail.value = data;
picture1.value = data.pictureUrl;
const response = await fetch(
'https://server.cqnctc.com:6081/web/toCFile/selectToCFileList',
{
method: 'POST',
headers: {
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
'Content-Type': 'application/json',
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
Accept: 'application/json, text/plain, */*',
},
body: JSON.stringify({
sourceId: data.orderId,
fileTypes: [4, 5],
}),
},
);
const result = await response.json();
for (const item of result.data) {
if (item.fileName.includes('进场图片')) {
data.parkInImgPath = item.filePath;
console.log('图片路径:', data.parkInImgPath);
} else {
data.parkOutImgPath = item.filePath;
}
}
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
detail.value = null;
}
</script>
<template>
<BasicModal title="详情">
<Descriptions
v-if="detail"
size="small"
:column="2"
bordered
:labelStyle="{ width: '100px' }"
>
<DescriptionsItem label="订单编号">
{{ detail.orderId }}
</DescriptionsItem>
<DescriptionsItem label="车场名称">
{{ detail.plName }}
</DescriptionsItem>
<DescriptionsItem label="停车类型">
{{
detail.carBusiType === 10
? '临时车'
: [11, 12, 13].includes(detail.carBusiType)
? '月租车'
: '未知'
}}
</DescriptionsItem>
<DescriptionsItem label="车牌号">
{{ detail.carNumber }}
</DescriptionsItem>
<DescriptionsItem label="车辆类型">
{{
detail.carType === 1
? '大型车'
: detail.carType === 2
? '小型车'
: detail.carType === 3
? ' 新能源车'
: '未知'
}}
</DescriptionsItem>
<DescriptionsItem label="应收">
{{ detail.orderTotalFee }}
</DescriptionsItem>
<DescriptionsItem label="停车时长">
{{ formatParkingDuration(detail.parkingDuration) }}
</DescriptionsItem>
<DescriptionsItem label="进场时间">
{{
detail.parkInTime
? dayjs(detail.parkInTime).format('YYYY-MM-DD HH:mm:ss')
: ''
}}
</DescriptionsItem>
<!-- <DescriptionsItem label="入驻位置">-->
<!-- {{ detail.locathon }}-->
<!-- </DescriptionsItem>-->
<DescriptionsItem label="进场图片">
<img
v-if="detail.parkInImgPath"
:src="detail.parkInImgPath"
alt="图片加载失败"
class="h-[100px] w-[100px]"
/>
</DescriptionsItem>
<DescriptionsItem label="出场时间">
{{
detail.parkOutTime
? dayjs(detail.parkOutTime).format('YYYY-MM-DD HH:mm:ss')
: ''
}}
</DescriptionsItem>
<!-- <DescriptionsItem label="入驻位置">-->
<!-- {{ detail.locathon }}-->
<!-- </DescriptionsItem>-->
<DescriptionsItem label="出场图片">
<img
v-if="detail.parkOutImgPath"
:src="detail.parkOutImgPath"
alt="图片加载失败"
class="h-[100px] w-[100px]"
/>
</DescriptionsItem>
<DescriptionsItem label="备注">
{{ detail.remark }}
</DescriptionsItem>
<DescriptionsItem label="状态">
{{ detail.parkState == 10 ? '在场' : '离场' }}
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>
<style scoped>
.detail-wrapper {
padding: 24px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.detail-card {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 8px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.08);
padding: 16px;
}
.detail-thumb {
width: 220px;
height: 260px;
background-color: #f5f7fa;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e5e7eb;
}
.detail-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-caption {
margin-top: 12px;
font-size: 14px;
color: #606266;
}
@media (max-width: 1024px) {
.detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.detail-grid {
grid-template-columns: 1fr;
}
.detail-thumb {
width: 100%;
height: 240px;
}
}
</style>

12
apps/web-antd/src/views/property/resident/person/index.vue
View File

@@ -54,11 +54,19 @@ const gridOptions: VxeGridProps = {
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await personList({
// return await personList({
// pageNum: page.currentPage,
// pageSize: page.pageSize,
// ...formValues,
// })
const res = await personList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
})
});
console.log(res);
return res;
},
},
},

40
apps/web-antd/src/views/property/resident/personPassRecordManagement/data.ts
View File

@@ -4,31 +4,31 @@ import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'actionTime',
label: '通行时间',
},
// {
// component: 'Input',
// fieldName: 'actionTime',
// label: '通行时间',
// },
{
component: 'Input',
fieldName: 'customerName',
label: '人员姓名',
},
{
component: 'Input',
fieldName: 'organFullPath',
label: '组织机构',
},
{
component: 'Input',
fieldName: 'doorName',
label: '门/电梯名称',
},
{
component: 'Input',
fieldName: 'deviceName',
label: '设备名称',
},
// {
// component: 'Input',
// fieldName: 'organFullPath',
// label: '组织机构',
// },
// {
// component: 'Input',
// fieldName: 'doorName',
// label: '门/电梯名称',
// },
// {
// component: 'Input',
// fieldName: 'deviceName',
// label: '设备名称',
// },
{
component: 'Select',
componentProps: {

13
apps/web-antd/src/views/property/resident/personPassRecordManagement/index.vue
View File

@@ -1,16 +1,9 @@
<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { Space } from 'ant-design-vue';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { commonDownloadExcel } from '#/utils/file/download';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns, querySchema } from './data';
import { getVisitorList } from '#/api/property/resident/passRecordManagement';
@@ -97,6 +90,6 @@ async function handleInfo(row: any) {
</Space>
</template>
</BasicTable>
<RecordDetailModal/>
<RecordDetailModal />
</Page>
</template>

18
apps/web-antd/src/views/property/resident/personPassRecordManagement/record-detail-modal.vue
View File

@@ -1,26 +1,10 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep, handleNode } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import {
resident_unitAdd,
resident_unitInfo,
resident_unitUpdate,
} from '#/api/property/resident/unit';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { communityTree } from '#/api/property/community';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const picture1 = ref('')
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
// {