sky/starwork-uniapp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成通行记录UI

Browse Source
This commit is contained in:
魏少阳 2025-01-16 15:06:17 +08:00
parent 88c2d3bf9e
commit 791026b892
11 changed files with 457 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages.json
View File

@ -218,6 +218,14 @@
"path": "pages/notification/notification",
"type": "page"
},
{
"path": "pages/personnel-passage/traffic-correlation",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/reset-password/reset-password",
"type": "page",
@ -278,21 +286,6 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/personnel-passage/access-authority/access-authority",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/personnel-passage/access-control/access-control",
"type": "page",
"style": {
"navigationStyle": "custom"
}
}
],
"subPackages": []

7
src/pages/home/home.vue
View File

@ -123,13 +123,13 @@
id: 106,
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
name: '通行权限',
url: '/pages/personnel-passage/access-authority/access-authority'
url: '/pages/personnel-passage/traffic-correlation'
},
{
id: 230,
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
name: '门禁控制',
url: '/pages/personnel-passage/access-control/access-control'
url: '/pages/personnel-passage/traffic-correlation'
},
{
id: 302,
@ -144,7 +144,8 @@
{
id: 299,
icon: 'https://file.hikmall.com/prod/image/771a717eb8d74f5bba71db68c9605a0f.png',
name: '通行记录'
name: '通行记录',
url: '/pages/personnel-passage/traffic-correlation'
},
{
id: 387,

21
src/pages/personnel-passage/access-authority/access-authority.vue → src/pages/personnel-passage/AccessAuthority/AccessAuthority.vue
View File

@ -9,12 +9,6 @@
<template>
<view class="passage-container">
<TopNavigation title="通行权限">
<view class="header-right mr-4">
<image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
</view>
</TopNavigation>
<!-- 替换原来的 banner 部分为 AccessSwiper -->
<AccessSwiper class="mt-4" />
@ -126,14 +120,14 @@
/>
<text>通行权限</text>
</view>
<view class="tab-item">
<view class="tab-item" @click="navigateTo('access-control')">
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
/>
<text>门禁控制</text>
</view>
<view class="tab-item">
<view class="tab-item" @click="navigateTo('traffic-record')">
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
@ -141,12 +135,21 @@
<text>通行记录</text>
</view>
</view>
<!-- </view>-->
<!-- 根据当前组件加载 -->
<component :is="currentComponent" />
</template>
<script setup>
import { ref } from 'vue'
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
import AccessSwiper from './components/AccessSwiper.vue'
const currentComponent = ref('') // 用于跟踪当前加载的组件
const navigateTo = page => {
currentComponent.value = page // 设置当前组件
}
</script>
<style scoped lang="scss">

0
src/pages/personnel-passage/access-authority/components/AccessSwiper.vue → src/pages/personnel-passage/AccessAuthority/components/AccessSwiper.vue
View File

23
src/pages/personnel-passage/access-control/access-control.vue → src/pages/personnel-passage/AccessControl/AccessControl.vue
View File

@ -9,12 +9,6 @@
<template>
<view class="control-container">
<TopNavigation title="门禁控制">
<view class="header-right mr-4">
<image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
</view>
</TopNavigation>
<!-- 快捷功能区 -->
<view class="quick-actions">
<view class="quick-item" style="background-color: #fff7f2">
@ -83,15 +77,24 @@
<!-- 底部导航 -->
<view class="tab-bar">
<view class="tab-item">
<image class="tab-icon" src="/static/images/icon_passage.png" mode="aspectFit" />
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png"
/>
<text>通行权限</text>
</view>
<view class="tab-item active">
<image class="tab-icon" src="/static/images/icon_control_active.png" mode="aspectFit" />
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
/>
<text>门禁控制</text>
</view>
<view class="tab-item">
<image class="tab-icon" src="/static/images/icon_record.png" mode="aspectFit" />
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
/>
<text>通行记录</text>
</view>
</view>
@ -105,7 +108,7 @@
const tabs = ['收藏', '全部']
const activeTab = ref(0)
const switchTab = (index: number) => {
const switchTab = index => {
activeTab.value = index
}
</script>

353
src/pages/personnel-passage/TrafficRecord/TrafficRecord.vue Normal file
View File

@ -0,0 +1,353 @@
<route lang="json5">
{
type: 'page',
style: {
navigationStyle: 'custom'
}
}
</route>
<template>
<view class="record-container">
<!-- 快捷功能区 -->
<view class="quick-actions">
<view class="quick-item" style="background-color: #fff7f2">
<view class="quick-content">
<text class="quick-title">通行消息提醒</text>
<text class="quick-desc">没有收到人员通行消息提醒？</text>
<image class="quick-icon" src="/static/images/icon_door_auto.png" mode="aspectFit" />
</view>
</view>
<view class="quick-item" style="background-color: #eef4ff">
<view class="quick-content">
<text class="quick-title">通行权限检测</text>
<text class="quick-desc">识别为陌生人？记录中抓拍不是该人员？</text>
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
</view>
</view>
</view>
<!-- 时间筛选 -->
<view class="time-filter">
<text
v-for="(item, index) in timeFilters"
:key="index"
class="filter-item"
:class="{ active: activeTimeFilter === index }"
@click="switchTimeFilter(index)"
>
{{ item }}
</text>
</view>
<!-- 通行记录列表 -->
<view class="record-list">
<view class="record-item">
<view class="user-info">
<image class="avatar" src="/static/images/icon_team_own.png" mode="aspectFit" />
<view class="info-content">
<text class="name">杨</text>
<text class="id">工号：16</text>
</view>
<view class="status-tag fail">认证失败</view>
<text class="remote-btn">远程开门</text>
</view>
<view class="record-detail">
<view class="detail-item">
<image
class="detail-icon"
src="/static/images/personnelPassage/icon_message.png"
mode="aspectFit"
/>
<text class="detail-text">DS-K(FU6004429)</text>
</view>
<view class="detail-item">
<image
class="detail-icon"
src="/static/images/personnelPassage/icon_address.png"
mode="aspectFit"
/>
<text class="detail-text">-</text>
</view>
<view class="detail-item">
<image
class="detail-icon"
src="/static/images/personnelPassage/icon_time.png"
mode="aspectFit"
/>
<text class="detail-text">2025-01-15 15:51:32</text>
</view>
</view>
</view>
</view>
<!-- 底部导航 -->
<view class="tab-bar">
<view class="tab-item">
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png"
/>
<text>通行权限</text>
</view>
<view class="tab-item">
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
/>
<text>门禁控制</text>
</view>
<view class="tab-item active">
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
/>
<text>通行记录</text>
</view>
</view>
<!-- </view>-->
</view>
</template>
<script setup>
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
const timeFilters = ['今天', '最近三天', '高级查询']
const activeTimeFilter = ref(0)
const switchTimeFilter = index => {
activeTimeFilter.value = index
}
</script>
<style lang="scss" scoped>
.record-container {
min-height: 100vh;
padding: 0 16px;
background-color: #f5f6fa;
}
.header-right {
display: flex;
gap: 8px;
align-items: center;
.more-text {
font-size: 14px;
color: #333;
}
.icon {
width: 20px;
height: 20px;
}
}
.quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 12px 0;
.quick-item {
position: relative;
height: 60px;
padding: 12px;
border-radius: 8px;
&:first-child {
background-color: #eef4ff;
// background: red;
.quick-icon {
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
}
}
&:last-child {
background-color: #fff7f2;
.quick-icon {
background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
}
}
.quick-content {
position: relative;
height: 100%;
.quick-title {
position: relative;
z-index: 2;
font-size: 15px;
font-weight: 500;
color: #333;
}
.quick-desc {
position: relative;
z-index: 2;
display: block;
margin-top: 8px;
margin-right: 20px;
font-size: 11px;
color: #666;
}
.quick-icon {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
width: 45px;
height: 45px;
border-radius: 50%;
transform: translateY(-50%);
image {
width: 100%;
height: 100%;
filter: brightness(0) invert(1);
}
}
}
}
}
.time-filter {
display: flex;
gap: 16px;
margin: 16px 0;
.filter-item {
padding: 6px 12px;
font-size: 14px;
color: #666;
background-color: #fff;
border-radius: 16px;
transition: color 0.3s ease;
&.active {
font-weight: 500;
color: #2b5cff;
}
}
}
.record-list {
.record-item {
position: relative;
padding: 16px;
margin-bottom: 12px;
background-color: #fff;
border-radius: 12px;
.user-info {
display: flex;
align-items: center;
margin-bottom: 16px;
.avatar {
width: 45px;
height: 45px;
margin-right: 10px;
background-color: #f5f5f5;
border-radius: 50%;
}
.info-content {
flex: 1;
.name {
font-size: 16px;
font-weight: 500;
color: #333;
}
.id {
display: block;
margin-top: 4px;
font-size: 12px;
color: #999;
}
}
.status-tag {
position: absolute;
top: 0px;
right: 0px;
padding: 2px 8px;
font-size: 12px;
// border-radius: 4px;
border-radius: 0 10px 0 10px;
&.fail {
color: #ff4d4f;
background-color: #fff2f0;
}
}
.remote-btn {
padding: 4px 8px;
font-size: 12px;
color: #2b5cff;
background-color: #eef4ff;
border-radius: 4px;
}
}
.record-detail {
.detail-item {
display: flex;
align-items: center;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.detail-icon {
width: 16px;
height: 16px;
margin-right: 8px;
}
.detail-text {
font-size: 14px;
color: #666;
}
}
}
}
}
.tab-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: space-around;
padding: 8px 0;
background-color: #fff;
border-top: 1px solid #f5f5f5;
.tab-item {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
.tab-icon {
width: 24px;
height: 24px;
}
text {
font-size: 12px;
}
&.active {
color: #2b5cff;
}
}
}
</style>

65
src/pages/personnel-passage/traffic-correlation.vue Normal file
View File

@ -0,0 +1,65 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom'
}
}
</route>
<template>
<view class="h-[calc(100vh-50px)] flex flex-col">
<TopNavigation :title="titleTab[curIndex]"></TopNavigation>
<scroll-view class="flex-1 box-border" scroll-y>
<view v-if="curIndex == 0">
<AccessAuthority />
</view>
<view v-else-if="curIndex == 1">
<AccessControl />
</view>
<view v-else-if="curIndex == 2">
<TrafficRecord />
</view>
</scroll-view>
</view>
<CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
</template>
<script lang="ts" setup>
// import { onLoad } from '@dcloudio/uni-app'
import AccessAuthority from './AccessAuthority/AccessAuthority.vue'
import AccessControl from './AccessControl/AccessControl.vue'
import TrafficRecord from './TrafficRecord/TrafficRecord.vue'
import { TabBarItem } from '@/typings'
const pages = [AccessAuthority, AccessControl, TrafficRecord]
const titleTab = ['通行权限', '门禁控制', '通行记录']
const list = ref<Array<TabBarItem>>([
{
title: '通行权限',
icon: 'home'
},
{
title: '门禁控制',
icon: 'notification'
},
{
title: '通行记录',
icon: 'setting'
}
])
const curIndex = ref(0)
// onLoad(options => {
// console.log(`11111：${Number(options.curIndex)}`)
// curIndex.value = Number(options.curIndex)
// })
const change = (data: { value: number }) => {
curIndex.value = data.value
}
</script>
<style lang="scss" scoped>
page {
background-color: #f6f8fc;
}
</style>

BIN
src/static/images/personnelPassage/icon_address.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/static/images/personnelPassage/icon_message.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/static/images/personnelPassage/icon_time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

5
src/types/uni-pages.d.ts vendored
View File

@ -26,6 +26,7 @@ interface NavigateToOptions {
"/pages/info-publish/notice-manage" |
"/pages/login/login" |
"/pages/notification/notification" |
"/pages/personnel-passage/traffic-correlation" |
"/pages/reset-password/reset-password" |
"/pages/workbench/workbench" |
"/pages/attendance/attendance-add-group/attendance-add-group" |
@ -33,9 +34,7 @@ interface NavigateToOptions {
"/pages/attendance/attendance-add-group/attendance-staff" |
"/pages/attendance/attendance-add-group/attendance-time" |
"/pages/attendance/attendance-add-group/outside-rules" |
"/pages/attendance/attendance-add-group/special-date-set" |
"/pages/personnel-passage/access-authority/access-authority" |
"/pages/personnel-passage/access-control/access-control";
"/pages/attendance/attendance-add-group/special-date-set";
}
interface RedirectToOptions extends NavigateToOptions {}