Merge branch 'develop_wsy' into 'develop'
Develop wsy See merge request StarlockTeam/starwork-uniapp!12
This commit is contained in:
刘燕峰
commit
95a514aa5c
@ -1,6 +1,7 @@
|
||||
// manifest.config.ts
|
||||
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'
|
||||
import path from 'node:path'
|
||||
// import path from 'node:path'
|
||||
import * as path from 'path'
|
||||
import { loadEnv } from 'vite'
|
||||
|
||||
// 获取环境变量的范例
|
||||
|
||||
@ -122,6 +122,8 @@
|
||||
"@uni-helper/vite-plugin-uni-pages": "0.2.20",
|
||||
"@uni-helper/vite-plugin-uni-platform": "^0.0.4",
|
||||
"@unocss/preset-legacy-compat": "^0.59.4",
|
||||
"@vue/cli-plugin-typescript": "^5.0.8",
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"@vue/runtime-core": "^3.5.13",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
|
||||
3406
pnpm-lock.yaml
generated
3406
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -26,11 +26,14 @@
|
||||
class="pos-absolute left-3 h-5 w-5"
|
||||
@click="back"
|
||||
></image>
|
||||
<view class="flex flex-items-center">
|
||||
<view class="line-clamp-1 max-w-60 break-all">
|
||||
<view class="flex-1 text-center">
|
||||
<view class="line-clamp-1 max-w-60 break-all mx-auto">
|
||||
{{ title }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pos-absolute right--3">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { UnwrapRef } from 'vue'
|
||||
import { IResData } from '@/typings'
|
||||
|
||||
type IUseRequestOptions<T> = {
|
||||
/** 是否立即执行 */
|
||||
|
||||
@ -163,7 +163,19 @@
|
||||
},
|
||||
{
|
||||
"path": "pages/info-publish/basic-info",
|
||||
"type": "page"
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/info-publish/drafts-list",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/info-publish/info-publish",
|
||||
@ -195,12 +207,16 @@
|
||||
"needLogin": false
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"path": "pages/notification/notification",
|
||||
"type": "page"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
@ -223,6 +239,14 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/attendance/attendance-add-group/attendance-device",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/attendance/attendance-add-group/attendance-staff",
|
||||
"type": "page",
|
||||
@ -257,4 +281,4 @@
|
||||
}
|
||||
],
|
||||
"subPackages": []
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,12 +122,14 @@
|
||||
{
|
||||
id: 106,
|
||||
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
|
||||
name: '通行权限'
|
||||
name: '通行权限',
|
||||
url: '/pages/personnel-passage/traffic-correlation'
|
||||
},
|
||||
{
|
||||
id: 230,
|
||||
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
|
||||
name: '门禁控制'
|
||||
name: '门禁控制',
|
||||
url: '/pages/personnel-passage/traffic-correlation'
|
||||
},
|
||||
{
|
||||
id: 302,
|
||||
@ -142,7 +144,8 @@
|
||||
{
|
||||
id: 299,
|
||||
icon: 'https://file.hikmall.com/prod/image/771a717eb8d74f5bba71db68c9605a0f.png',
|
||||
name: '通行记录'
|
||||
name: '通行记录',
|
||||
url: '/pages/personnel-passage/traffic-correlation'
|
||||
},
|
||||
{
|
||||
id: 387,
|
||||
|
||||
@ -1,7 +1,332 @@
|
||||
<route lang="json5" type="home">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '首页'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view></view>
|
||||
<view class="mine-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="header">
|
||||
<text class="title">我的</text>
|
||||
<view class="header-right">
|
||||
<image class="icon" src="/static/images/icon_scan_code.png" mode="aspectFit" />
|
||||
<image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-info">
|
||||
<view class="avatar-section">
|
||||
<image class="avatar" src="/static/images/default-avatar.png" />
|
||||
<view class="user-detail">
|
||||
<text class="username">未登录</text>
|
||||
<text class="user-type">游客模式 ></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="team-entry">
|
||||
<image
|
||||
class="team-icon"
|
||||
src="https://file.hikmall.com/prod/image/3e56cfb5cfae4bd285d6f55e51e1ce23.png"
|
||||
/>
|
||||
<text>我的团队</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推荐服务 -->
|
||||
<view class="section">
|
||||
<text class="section-title">推荐服务</text>
|
||||
<view class="service-grid">
|
||||
<view class="service-item" v-for="(item, index) in recommendServices" :key="index">
|
||||
<image class="service-icon" :src="item.icon" />
|
||||
<text class="service-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 常用工具 -->
|
||||
<view class="section">
|
||||
<text class="section-title">常用工具</text>
|
||||
<view class="tools-grid">
|
||||
<view class="tool-item" v-for="(item, index) in commonTools" :key="index">
|
||||
<image class="tool-icon" :src="item.icon" />
|
||||
<text class="tool-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 帮助中心和分享区域 -->
|
||||
<view class="list-section">
|
||||
<view class="list-item">
|
||||
<text>帮助中心</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text>分享海康互联</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="action-item">
|
||||
<image
|
||||
class="action-icon"
|
||||
src="https://file.hikmall.com/prod/image/4dbe971d6fac465cb4fed956defd678c.png"
|
||||
/>
|
||||
<text>我的订单</text>
|
||||
</view>
|
||||
<view class="action-item">
|
||||
<image
|
||||
class="action-icon"
|
||||
src="https://file.hikmall.com/prod/image/116e1ea563474601ac075ac5bb312963.png"
|
||||
/>
|
||||
<text>发票管理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const recommendServices = [
|
||||
{
|
||||
name: '流量充值',
|
||||
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png'
|
||||
},
|
||||
{
|
||||
name: 'VIP服务',
|
||||
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png'
|
||||
},
|
||||
{
|
||||
name: '电脑客户端',
|
||||
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png'
|
||||
},
|
||||
{
|
||||
name: '智能算法',
|
||||
icon: 'https://file.hikmall.com/prod/image/701d5a7031fa4b4290838c4562f99a0b.png'
|
||||
},
|
||||
{
|
||||
name: '电话',
|
||||
icon: 'https://file.hikmall.com/prod/image/771a717eb8d74f5bba71db68c9605a0f.png'
|
||||
}
|
||||
]
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
const commonTools = [
|
||||
{
|
||||
name: '分享管理',
|
||||
icon: 'https://file.hikmall.com/prod/image/9752516f054342d3ac310a0fdb32b654.png'
|
||||
},
|
||||
{
|
||||
name: '本地设备调试',
|
||||
icon: 'https://file.hikmall.com/prod/image/4dbe971d6fac465cb4fed956defd678c.png'
|
||||
},
|
||||
{
|
||||
name: '设备校时',
|
||||
icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png'
|
||||
},
|
||||
{
|
||||
name: '密码恢复',
|
||||
icon: 'https://file.hikmall.com/prod/image/9e2b6e95c2904540a9a3dc675d25cc13.png'
|
||||
},
|
||||
{
|
||||
name: '局域网预览',
|
||||
icon: 'https://file.hikmall.com/prod/image/6cea7ba6b3b34464998bb501a609f3a9.png'
|
||||
},
|
||||
{
|
||||
name: 'IP扫描',
|
||||
icon: 'https://file.hikmall.com/prod/image/60c64c6c80a9429fa8d084506cd2f021.png'
|
||||
},
|
||||
{
|
||||
name: '我的相册',
|
||||
icon: 'https://file.hikmall.com/prod/image/116e1ea563474601ac075ac5bb312963.png'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mine-container {
|
||||
min-height: 100vh;
|
||||
padding: 0 16px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 44px 0 20px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: brightness(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
//background-color: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.username {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-type {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-entry {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 2px 4px;
|
||||
font-size: 12px;
|
||||
color: #2b5cff;
|
||||
background-color: #ffffff; // 添加背景色
|
||||
border-radius: 5px;
|
||||
|
||||
.team-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.service-grid,
|
||||
.tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
.service-item,
|
||||
.tool-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.service-icon,
|
||||
.tool-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.service-name,
|
||||
.tool-name {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
overflow-x: auto; // 允许左右滑动
|
||||
|
||||
.service-item,
|
||||
.tool-item {
|
||||
width: 16vw; // 单个item的宽度是屏幕宽度的四分之一
|
||||
}
|
||||
}
|
||||
|
||||
.list-section {
|
||||
margin-bottom: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: space-around;
|
||||
padding: 16px;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
//background-color: red;
|
||||
|
||||
.action-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 12px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
387
src/pages/personnel-passage/AccessAuthority/AccessAuthority.vue
Normal file
387
src/pages/personnel-passage/AccessAuthority/AccessAuthority.vue
Normal file
@ -0,0 +1,387 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="passage-container">
|
||||
<!-- 替换原来的 banner 部分为 AccessSwiper -->
|
||||
<AccessSwiper class="mt-4" />
|
||||
|
||||
<!-- 权限组快捷入口 -->
|
||||
<view class="quick-actions">
|
||||
<view class="quick-item">
|
||||
<view class="quick-content">
|
||||
<text class="quick-title">添加权限组</text>
|
||||
<text class="quick-desc">门禁授权</text>
|
||||
<image class="quick-icon" src="/static/images/icon_add_group.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="quick-item">
|
||||
<view class="quick-content">
|
||||
<text class="quick-title">下发权限</text>
|
||||
<text class="quick-desc">同步权限到设备</text>
|
||||
<image class="quick-icon" src="/static/images/icon_publish.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 人员管理 -->
|
||||
<view class="feature-item">
|
||||
<view class="feature-left">
|
||||
<image
|
||||
class="feature-icon"
|
||||
src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
|
||||
/>
|
||||
<view class="feature-text">
|
||||
<text class="feature-title">人员管理</text>
|
||||
<text class="feature-desc">团队管理内录入人员信息/人脸/指纹/卡</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||||
</view>
|
||||
|
||||
<!-- 通行权限组 -->
|
||||
<view class="access-authority-group">
|
||||
<view class="feature-item">
|
||||
<view class="feature-left">
|
||||
<image
|
||||
class="feature-icon"
|
||||
src="https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png"
|
||||
/>
|
||||
<view class="feature-text">
|
||||
<text class="feature-title">通行权限组</text>
|
||||
<text class="feature-desc">配置人员在某段时间能开某个门</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||||
</view>
|
||||
|
||||
<!-- 时间计划和门禁点分组 -->
|
||||
<view class="sub-features">
|
||||
<view class="sub-item">
|
||||
<image
|
||||
class="sub-icon"
|
||||
src="https://file.hikmall.com/prod/image/0526d084da4a49579f832dd4588dcb16.png"
|
||||
/>
|
||||
<text>通行时间计划</text>
|
||||
</view>
|
||||
<view class="sub-item">
|
||||
<image
|
||||
class="sub-icon"
|
||||
src="https://file.hikmall.com/prod/image/7ea5f88d404442eeb958fbe0904777d1.png"
|
||||
/>
|
||||
<text>门禁点分组</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 权限查询 -->
|
||||
<view class="feature-item">
|
||||
<view class="feature-left">
|
||||
<image
|
||||
class="feature-icon"
|
||||
src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
|
||||
/>
|
||||
<view class="feature-text">
|
||||
<text class="feature-title">权限查询</text>
|
||||
<text class="feature-desc">查询人员通行权限，与信息下发状态</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||||
</view>
|
||||
|
||||
<!-- 下发记录 -->
|
||||
<view class="feature-item">
|
||||
<view class="feature-left">
|
||||
<image
|
||||
class="feature-icon"
|
||||
src="https://file.hikmall.com/prod/image/e6860e8e5cc64369accadae5347fb0c1.png"
|
||||
/>
|
||||
<view class="feature-text">
|
||||
<text class="feature-title">下发记录</text>
|
||||
<text class="feature-desc">查询下发状态与结果</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="arrow" src="/static/images/icon_black_right.png" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<view class="tab-bar">
|
||||
<view class="tab-item active">
|
||||
<image
|
||||
class="tab-icon"
|
||||
src="https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png"
|
||||
/>
|
||||
<text>通行权限</text>
|
||||
</view>
|
||||
<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" @click="navigateTo('traffic-record')">
|
||||
<image
|
||||
class="tab-icon"
|
||||
src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
|
||||
/>
|
||||
<text>通行记录</text>
|
||||
</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">
|
||||
.passage-container {
|
||||
min-height: 100vh;
|
||||
padding: 0 16px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 8px; // 图标之间的间距
|
||||
align-items: end;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||||
border-radius: 12px;
|
||||
|
||||
.banner-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
|
||||
.banner-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.banner-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin: 12px 0;
|
||||
|
||||
.quick-item {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
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 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.quick-desc {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
// padding: 8px;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: brightness(0) invert(1); // 将图标改为白色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//.feature-list {
|
||||
// padding: 4px 0;
|
||||
// background-color: #fff;
|
||||
//border-radius: 12px;
|
||||
|
||||
.access-authority-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
//border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.feature-left {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.feature-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.feature-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
//}
|
||||
|
||||
.sub-features {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
padding: 0 16px 12px 16px;
|
||||
|
||||
.sub-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background-color: #f5f6fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.sub-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<swiper
|
||||
class="swiper-container"
|
||||
:indicator-dots="true"
|
||||
:autoplay="true"
|
||||
:interval="3000"
|
||||
:duration="500"
|
||||
indicator-active-color="#FFFFFF"
|
||||
indicator-color="rgba(255, 255, 255, 0.4)"
|
||||
>
|
||||
<!-- 访客通行卡片 -->
|
||||
<swiper-item>
|
||||
<view class="visitor-card">
|
||||
<view class="card-content">
|
||||
<view class="card-left">
|
||||
<text class="card-title">访客人员，临时通行</text>
|
||||
<text class="card-desc">使用访客管理，来访轻松搞定</text>
|
||||
<view class="card-btn">看详情 ></view>
|
||||
</view>
|
||||
<view class="card-right">
|
||||
<image src="/static/images/visitor-illustration.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item>
|
||||
<view class="visitor-card">
|
||||
<view class="card-content">
|
||||
<view class="card-left">
|
||||
<text class="card-title">通行权限使用说明</text>
|
||||
<text class="card-desc">区分长期通行与临时通行,对长期通信人员下发通行权限</text>
|
||||
<view class="card-btn">看详情 ></view>
|
||||
</view>
|
||||
<view class="card-right">
|
||||
<image src="/static/images/visitor-illustration.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 提醒卡片 -->
|
||||
<swiper-item>
|
||||
<view class="remind-card">
|
||||
<view class="card-header">
|
||||
<text class="remind-tag">提醒</text>
|
||||
<text class="remind-text">您有11条信息未同步到设备</text>
|
||||
<image class="arrow-icon" src="/static/images/icon_white_right.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="stats-container">
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">2</text>
|
||||
<text class="stat-label">人员/通行规则</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">0</text>
|
||||
<text class="stat-label">人脸</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">7</text>
|
||||
<text class="stat-label">指纹</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">0</text>
|
||||
<text class="stat-label">卡片</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">2</text>
|
||||
<text class="stat-label">密码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-container {
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
// .swiper-card {
|
||||
// height: 100%;
|
||||
// padding: 24px 16px;
|
||||
// border-radius: 12px;
|
||||
// }
|
||||
|
||||
.visitor-card {
|
||||
height: 100%;
|
||||
padding: 16px 16px;
|
||||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||||
border-radius: 12px;
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
|
||||
.card-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
width: fit-content;
|
||||
padding: 4px 8px;
|
||||
margin-top: 15px;
|
||||
font-size: 12px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remind-card {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
|
||||
border-radius: 12px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
|
||||
.remind-tag {
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
// border-radius: 4px;
|
||||
}
|
||||
|
||||
.remind-text {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
padding-top: 12px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
|
||||
.stat-num {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
src/pages/personnel-passage/AccessControl/AccessControl.vue
Normal file
355
src/pages/personnel-passage/AccessControl/AccessControl.vue
Normal file
@ -0,0 +1,355 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
type: 'page',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="control-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="search-box">
|
||||
<image class="search-icon" src="/static/images/icon_search.png" mode="aspectFit" />
|
||||
<input type="text" placeholder="输入门禁点名称搜索" placeholder-class="placeholder" />
|
||||
</view>
|
||||
|
||||
<!-- 标签切换 -->
|
||||
<view class="tabs">
|
||||
<view class="tab-wrapper" v-for="(tab, index) in tabs" :key="index" @click="switchTab(index)">
|
||||
<text class="tab-item" :class="{ active: activeTab === index }">{{ tab }}</text>
|
||||
</view>
|
||||
<view class="tab-line" :style="{ transform: `translateX(${activeTab * 56}px)` }"></view>
|
||||
</view>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<view class="device-list">
|
||||
<view class="device-item">
|
||||
<text class="offline-tag">离线</text>
|
||||
<view class="device-info">
|
||||
<image
|
||||
class="device-icon"
|
||||
src="/static/images/icon_one_key_door_key.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="device-name">DS-K(FU6004429)</text>
|
||||
</view>
|
||||
<view class="unlock-btn">
|
||||
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="device-item">
|
||||
<text class="offline-tag">离线</text>
|
||||
<view class="device-info">
|
||||
<image
|
||||
class="device-icon"
|
||||
src="/static/images/icon_one_key_door_key.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="device-name">DS-K(L40959329)</text>
|
||||
</view>
|
||||
<view class="unlock-btn">
|
||||
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
|
||||
</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 active">
|
||||
<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="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
|
||||
/>
|
||||
<text>通行记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const tabs = ['收藏', '全部']
|
||||
const activeTab = ref(0)
|
||||
|
||||
const switchTab = index => {
|
||||
activeTab.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.control-container {
|
||||
min-height: 100vh;
|
||||
padding: 0 16px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin: 12px 0;
|
||||
|
||||
.quick-item {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
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 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.quick-desc {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
// padding: 8px;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: brightness(0) invert(1); // 将图标改为白色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin: 16px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.search-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
gap: 24px;
|
||||
padding-bottom: 4px;
|
||||
margin: 16px 0;
|
||||
|
||||
.tab-wrapper {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding-bottom: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 2px;
|
||||
background-color: #2b5cff;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.device-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
|
||||
.device-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
.offline-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
border-radius: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.unlock-btn {
|
||||
position: absolute;
|
||||
top: 50%; /* 改为50% */
|
||||
right: 8px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%); /* 添加这行来实现精确居中 */
|
||||
|
||||
.unlock-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
padding-top: 16px;
|
||||
|
||||
.device-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
353
src/pages/personnel-passage/TrafficRecord/TrafficRecord.vue
Normal file
353
src/pages/personnel-passage/TrafficRecord/TrafficRecord.vue
Normal 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
65
src/pages/personnel-passage/traffic-correlation.vue
Normal 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>
|
||||
@ -62,8 +62,8 @@ interface TeamInfo {
|
||||
}
|
||||
|
||||
// 获取用户信息
|
||||
export const getUserInfoApi = (params: UserInfo) => {
|
||||
return http.post('/v1/user/detail', params)
|
||||
export const getUserInfoApi = () => {
|
||||
return http.post('/v1/user/detail')
|
||||
}
|
||||
|
||||
export interface resetPasswordRequest {
|
||||
|
||||
BIN
src/static/images/icon_black_right.png
Normal file
BIN
src/static/images/icon_black_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/static/images/icon_search.png
Normal file
BIN
src/static/images/icon_search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/static/images/icon_white_right.png
Normal file
BIN
src/static/images/icon_white_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/static/images/personnelPassage/icon_address.png
Normal file
BIN
src/static/images/personnelPassage/icon_address.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/static/images/personnelPassage/icon_message.png
Normal file
BIN
src/static/images/personnelPassage/icon_message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/static/images/personnelPassage/icon_time.png
Normal file
BIN
src/static/images/personnelPassage/icon_time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
11
src/types/uni-pages.d.ts
vendored
11
src/types/uni-pages.d.ts
vendored
@ -4,7 +4,8 @@
|
||||
// Generated by vite-plugin-uni-pages
|
||||
|
||||
interface NavigateToOptions {
|
||||
url: "/pages/home/home" |
|
||||
url: "/pages/mine/mine" |
|
||||
"/pages/home/home" |
|
||||
"/pages/application-list/application-list" |
|
||||
"/pages/approval/approval" |
|
||||
"/pages/attendance/allowed-time" |
|
||||
@ -17,15 +18,19 @@ interface NavigateToOptions {
|
||||
"/pages/attendance/issue-record" |
|
||||
"/pages/code/code" |
|
||||
"/pages/get-code/get-code" |
|
||||
"/pages/info-publish/announce-notice" |
|
||||
"/pages/info-publish/basic-info" |
|
||||
"/pages/info-publish/drafts-list" |
|
||||
"/pages/info-publish/info-publish" |
|
||||
"/pages/info-publish/notice-details" |
|
||||
"/pages/info-publish/notice" |
|
||||
"/pages/info-publish/notice-manage" |
|
||||
"/pages/login/login" |
|
||||
"/pages/mine/mine" |
|
||||
"/pages/notification/notification" |
|
||||
"/pages/personnel-passage/traffic-correlation" |
|
||||
"/pages/reset-password/reset-password" |
|
||||
"/pages/workbench/workbench" |
|
||||
"/pages/attendance/attendance-add-group/attendance-add-group" |
|
||||
"/pages/attendance/attendance-add-group/attendance-device" |
|
||||
"/pages/attendance/attendance-add-group/attendance-staff" |
|
||||
"/pages/attendance/attendance-add-group/attendance-time" |
|
||||
"/pages/attendance/attendance-add-group/outside-rules" |
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import fs from 'fs-extra'
|
||||
import path from 'path'
|
||||
// import path from 'path'
|
||||
import * as path from 'path'
|
||||
|
||||
export function copyNativeRes() {
|
||||
const waitPath = path.resolve(__dirname, '../src/nativeResources')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user