zhouyanli/property-manager-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

今日巡检-前端搭建

Browse Source
This commit is contained in:
Zy
2026-04-29 07:52:05 +08:00
parent 716c0ab220
commit 152cad43e5
4 changed files with 539 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
wuye-manager-uniapp/components/tabs/tabs.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<view class="tabs_box">
<view
v-for="(item, index) in tabslist"
:key="index"
@tap="handleTabs(item)"
class="tabs_items"
:class="{
active: item.value === activeValue
}"
>
{{ item.name }}
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
type tabslistType = { name: string; value: number }
const props = defineProps<{
tabslist: tabslistType[]
}>()
const emit = defineEmits<{
update: [value: number]
}>()
const activeValue = ref(0)
const handleTabs = (row: tabslistType) => {
activeValue.value = row.value
emit('update', row.value)
}
</script>
<style lang="scss" scoped>
// tabs
.tabs_box {
height: 60rpx;
line-height: 60rpx;
width: 100%;
display: flex;
align-items: center;
overflow-y: hidden;
overflow-x: auto;
.tabs_items {
/* 关键：不压缩宽度 */
flex-shrink: 0;
margin-right: 60rpx;
color: #4d5dfa;
&.active {
position: relative;
&::after {
content: '';
display: block;
width: 100%;
height: 8rpx;
background-color: #6371fa;
background: linear-gradient(180deg, #4d5dfa 0%, #bac0fa 100%);
border-radius: 4rpx;
position: absolute;
left: 0;
bottom: 0rpx;
}
}
}
}
</style>

59
wuye-manager-uniapp/pageSubPack/inspection/inspection_record.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<view class="page_container inspection_record_box">
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
<view class="">
<view class="record_item">
<view class="time">
<view>10月11日</view>
</view>
<view class="record_list_box">
<view class="record_list_item">
<view class="title">
<view class="title_name"> 标题 </view>
<view class="title_status"> 已巡检 </view>
</view>
<view class="items">
<view class="item">
<text>设备巡检</text>
</view>
</view>
<view class="time">
<text>巡检时间：</text>
<text>09:00:00 - 12:00:00</text>
</view>
<view class="time user">
<text>巡检人：</text>
<text>李相龙</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import TabsComponents from '@/components/tabs/tabs.vue'
const tabslist = [
{
name: '全部',
value: 0
},
{
name: '未巡检',
value: 1
},
{
name: ' 已巡检',
value: 2
}
]
function handleChangeTabs(val: number) {
console.log('选择了：', val)
}
</script>
<style lang="scss" scoped>
.inspection_record_box {
}
</style>

10
wuye-manager-uniapp/pages.json
View File

@@ -98,6 +98,12 @@
"style": { "style": {
"navigationBarTitleText": "巡检上报" "navigationBarTitleText": "巡检上报"
} }
},
{
"path": "inspection_record",
"style": {
"navigationBarTitleText": "巡检记录"
}
} }
] ]
}, },
@@ -157,8 +163,8 @@
}, },
"condition": { "condition": {
"list": [{ "list": [{
"name": "巡检上报", "name": "巡检记录",
"path": "pageSubPack/inspection/inspection_upload" "path": "pageSubPack/inspection/inspection_record"
}] }]
}, },
"tabBar": { "tabBar": {

810
wuye-manager-uniapp/pages/index/index.vue
View File

@@ -1,453 +1,447 @@
<template> <template>
<view class="content-class"> <view class="content-class">
<view class="nar-top"> <view class="nar-top">
<!-- 这里是状态栏占位 --> <!-- 这里是状态栏占位 -->
<view class="status_bar"></view> <view class="status_bar"></view>
<!-- 导航栏 --> <!-- 导航栏 -->
<view class="nav-bar"> <view class="nav-bar">
<text class="nav-title">首页</text> <text class="nav-title">首页</text>
</view> </view>
<view class="tabbarClass"> <view class="tabbarClass">
<view class="header-container" @click="navigateToPage"> <view class="header-container" @click="navigateToPage">
<!-- 左侧小区选择区域 --> <!-- 左侧小区选择区域 -->
<view class="location-area"> <view class="location-area">
<!-- 定位图标 --> <!-- 定位图标 -->
<view class="location-icon"> <view class="location-icon">
<image src="/static/imgs/adress.png" style="height: 100%;width: 100%;"></image> <image src="/static/imgs/adress.png" style="height: 100%; width: 100%"></image>
</view> </view>
<!-- 小区名称和下拉箭头 --> <!-- 小区名称和下拉箭头 -->
<view class="community-selector"> <view class="community-selector">
<text class="community-name">{{ currentCommunity }}</text> <text class="community-name">{{ currentCommunity }}</text>
<view class="community-icon"> <view class="community-icon">
<image src="/static/imgs/三角形.png" style="height: 100%;width: 100%;"></image> <image src="/static/imgs/三角形.png" style="height: 100%; width: 100%"></image>
</view> </view>
</view>
</view>
</view>
</view>
</view>
</view> <!-- banner -->
</view> <view class="bannarClass">
</view> <uni-swiper-dot
class="uni-swiper-dot-box"
</view> @clickItem="clickItem"
</view> :info="bannerList"
:current="current"
<!-- banner --> :mode="mode"
<view class="bannarClass"> >
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="bannerList" :current="current" <swiper class="swiper-box" :current="swiperDotIndex" :autoplay="true">
:mode="mode"> <swiper-item v-for="(item, index) in bannerList" :key="index">
<swiper class="swiper-box" :current="swiperDotIndex" :autoplay="true"> <view class="swiper-item">
<swiper-item v-for="(item, index) in bannerList" :key="index"> <image :src="item.img" style="width: 100%; height: 100%"></image>
<view class="swiper-item"> </view>
<image :src="item.img" style="width: 100%;height: 100%;"></image> </swiper-item>
</view> </swiper>
</swiper-item> </uni-swiper-dot>
</swiper> </view>
</uni-swiper-dot> <!-- 巡检 -->
</view> <view class="inspectionClass">
<!-- 巡检 --> <!-- 消息通知栏 -->
<view class="inspectionClass"> <view class="noticeClass">
<!-- 消息通知栏 --> <!-- 左侧消息通知文字 -->
<view class="noticeClass"> <view class="notice-left">
<!-- 左侧消息通知文字 --> <image src="/static/imgs/notice.png" class="notice-icon"></image>
<view class="notice-left"> </view>
<image src="/static/imgs/notice.png" class="notice-icon"></image> <!-- 右侧滚动公告 -->
</view> <view class="notice-right" @click="getNoticeMore">
<!-- 右侧滚动公告 --> <uni-notice-bar
<view class="notice-right" @click="getNoticeMore"> :text="noticeText"
<uni-notice-bar :text="noticeText" type="line" :showIcon="false" show-get-more scrollable type="line"
color="#fff" background-color="transparent" moreColor="#fff" no-border> :showIcon="false"
</uni-notice-bar> show-get-more
</view> scrollable
</view> color="#fff"
background-color="transparent"
<!-- 巡检数据统计区 --> moreColor="#fff"
<view class="statistics-wrap"> no-border
<view class="statistics-item" @click="goToDaysInspection"> >
<text class="num">25</text> </uni-notice-bar>
<text class="label">巡检点</text> </view>
</view> </view>
<view class="statistics-item">
<text class="num">5</text>
<text class="label">巡检点</text>
</view>
<view class="statistics-item">
<text class="num">25</text>
<text class="label">巡检点</text>
</view>
</view>
</view>
<!-- 网格布局功能 -->
<view class="function-container">
<!-- 第一行功能：故障上报、一键开门、工单大厅、我的工单 -->
<view class="function-row">
<view class="function-item">
<image class="item-icon" src="/static/imgs/fault-report.png" mode="aspectFit"></image>
<text class="item-text">故障上报</text>
</view>
<view class="function-item" @click="goToOneOpenDoor">
<image class="item-icon" src="/static/imgs/open.png" mode="aspectFit"></image>
<text class="item-text">一键开门</text>
</view>
<view class="function-item">
<image class="item-icon" src="/static/imgs/work-order.png" mode="aspectFit"></image>
<text class="item-text">工单大厅</text>
</view>
<view class="function-item">
<image class="item-icon" src="/static/imgs/my-work.png" mode="aspectFit"></image>
<text class="item-text">我的工单</text>
</view>
</view>
<!-- 2 -->
<view class="function-row" style="margin-top: 2px;">
<view class="function-item">
<image class="item-icon" src="/static/imgs/complaint.png" mode="aspectFit"></image>
<text class="item-text">投诉处理</text>
</view>
</view>
</view>
</view>
<!-- 巡检数据统计区 -->
<view class="statistics-wrap">
<view class="statistics-item" @click="goToInspectionRecord">
<text class="num">25</text>
<text class="label">全部巡检点</text>
</view>
<view class="statistics-item" @click="goToDaysInspection">
<text class="num">5</text>
<text class="label">待巡检点</text>
</view>
<view class="statistics-item">
<text class="num">25</text>
<text class="label">已巡检点</text>
</view>
</view>
</view>
<!-- 网格布局功能 -->
<view class="function-container">
<!-- 第一行功能：故障上报、一键开门、工单大厅、我的工单 -->
<view class="function-row">
<view class="function-item">
<image class="item-icon" src="/static/imgs/fault-report.png" mode="aspectFit"></image>
<text class="item-text">故障上报</text>
</view>
<view class="function-item" @click="goToOneOpenDoor">
<image class="item-icon" src="/static/imgs/open.png" mode="aspectFit"></image>
<text class="item-text">一键开门</text>
</view>
<view class="function-item">
<image class="item-icon" src="/static/imgs/work-order.png" mode="aspectFit"></image>
<text class="item-text">工单大厅</text>
</view>
<view class="function-item">
<image class="item-icon" src="/static/imgs/my-work.png" mode="aspectFit"></image>
<text class="item-text">我的工单</text>
</view>
</view>
<!-- 2 -->
<view class="function-row" style="margin-top: 2px">
<view class="function-item">
<image class="item-icon" src="/static/imgs/complaint.png" mode="aspectFit"></image>
<text class="item-text">投诉处理</text>
</view>
</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
import { import { ref } from 'vue'
ref import { onLoad, onUnload } from '@dcloudio/uni-app'
} from 'vue'
import {
onLoad,
onUnload
} from '@dcloudio/uni-app'
// 列表数据状态 // 列表数据状态
const current = ref(0) const current = ref(0)
const currentCommunity = ref('碧桂园小区') const currentCommunity = ref('碧桂园小区')
const bannerList = ref([ const bannerList = ref([
{ {
img: '/static/imgs/banner1.png' img: '/static/imgs/banner1.png'
}, },
{ {
img: '/static/bannar2.png' img: '/static/bannar2.png'
}, }
]) ])
const noticeText = ref('公告公告本小区今天安装了摄像头') const noticeText = ref('公告公告本小区今天安装了摄像头')
// =======方法=======
// 跳转小区
const navigateToPage = () => {
uni.navigateTo({
url: '/pageSubPack/notice-list/select-community'
})
}
// 跳转公告
const getNoticeMore = () => {
uni.navigateTo({
url: '/pageSubPack/notice-list/notice-list'
})
}
// 跳转一键开门
const goToOneOpenDoor = () => {
uni.navigateTo({
url: '/pageSubPack/oneClickOpen/oneClickOpen'
})
}
// 跳转到 今日巡检
const goToDaysInspection = () => {
uni.navigateTo({
url: '/pageSubPack/inspection/toDays_inscpection'
})
}
// 跳转到 巡检记录
const goToInspectionRecord = () => {
uni.navigateTo({
url: '/pageSubPack/inspection/inspection_record'
})
}
// 接收选择小区返回的参数
const slelctHomeData = data => {
// console.log('收到B页面返回的数据：', data)
currentCommunity.value = data.name
}
onLoad(() => {
// 绑定全局事件监听
uni.$on('confirm', slelctHomeData)
})
// =======方法======= // 页面销毁时移除监听（防止内存泄漏）
// 跳转小区 onUnload(() => {
const navigateToPage =() =>{ uni.$off('confirm', slelctHomeData)
uni.navigateTo({ })
url:"/pageSubPack/notice-list/select-community"
})
}
// 跳转公告
const getNoticeMore = () => {
uni.navigateTo({
url: "/pageSubPack/notice-list/notice-list"
})
}
// 跳转一键开门
const goToOneOpenDoor = ()=>{
uni.navigateTo({
url: "/pageSubPack/oneClickOpen/oneClickOpen"
})
}
// 跳转到 今日巡检
const goToDaysInspection = () => {
uni.navigateTo({
url: "/pageSubPack/inspection/toDays_inscpection"
})
}
// 接收选择小区返回的参数
const slelctHomeData = (data) => {
// console.log('收到B页面返回的数据：', data)
currentCommunity.value = data.name
}
onLoad(() => {
// 绑定全局事件监听
uni.$on('confirm', slelctHomeData)
// 方法逻辑
})
// 页面销毁时移除监听（防止内存泄漏）
onUnload(() => {
uni.$off('confirm', slelctHomeData)
})
// 方法逻辑
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-class { .content-class {
// margin: 0 20rpx; // margin: 0 20rpx;
// padding: 2rpx; // padding: 2rpx;
background-color: #f9f9f9; background-color: #f9f9f9;
padding-bottom: 100rpx; padding-bottom: 100rpx;
box-sizing: border-box; box-sizing: border-box;
/* 保证padding不会撑大容器 */ /* 保证padding不会撑大容器 */
min-height: 110vh; min-height: 110vh;
overflow-y: auto; overflow-y: auto;
.nar-top { .nar-top {
height: 400rpx; height: 400rpx;
width: 100%; width: 100%;
// background-color: #C0E4FB; // background-color: #C0E4FB;
background: repeating-linear-gradient(to right, #EDF4FA, #C0E4FB); background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb);
position: absolute; position: absolute;
}
} .status_bar {
height: 46px;
width: 100%;
}
.status_bar { /* 导航栏 */
height: 46px; .nav-bar {
width: 100%; height: 44px;
} line-height: 44px;
text-align: center;
}
/* 导航栏 */ .nav-title {
.nav-bar { font-size: 14px;
height: 44px; font-weight: 400;
line-height: 44px; }
text-align: center;
}
.nav-title { .header-container {
font-size: 14px; display: flex;
font-weight: 400; align-items: center;
} justify-content: space-between;
padding: 4rpx 30rpx;
box-sizing: border-box;
// border-bottom: 1rpx solid #f0f0f0;
position: absolute;
top: 85px;
left: 0;
z-index: 9999;
}
.header-container { // 左侧区域
display: flex; .location-area {
align-items: center; display: flex;
justify-content: space-between; align-items: center;
padding: 4rpx 30rpx; position: relative;
box-sizing: border-box; flex: 1;
// border-bottom: 1rpx solid #f0f0f0; min-width: 0;
position: absolute;
top: 85px;
left: 0;
z-index: 9999;
}
// 左侧区域 .location-icon {
.location-area { width: 45rpx;
display: flex; height: 45rpx;
align-items: center; margin-right: 12rpx;
position: relative; flex-shrink: 0;
flex: 1; }
min-width: 0;
.location-icon { .community-selector {
width: 45rpx; display: flex;
height: 45rpx; align-items: center;
margin-right: 12rpx; max-width: 300rpx;
flex-shrink: 0; cursor: pointer;
}
.community-selector { .community-name {
display: flex; font-size: 26rpx;
align-items: center; font-weight: 500;
max-width: 300rpx; color: #000;
cursor: pointer; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200rpx;
}
.community-name { .community-icon {
font-size: 26rpx; width: 20rpx;
font-weight: 500; height: 20rpx;
color: #000; margin-left: 20rpx;
white-space: nowrap; margin-top: -22rpx;
overflow: hidden; }
text-overflow: ellipsis; }
max-width: 200rpx; }
}
.community-icon { .bannarClass {
width: 20rpx; position: relative;
height: 20rpx; top: 110px;
margin-left: 20rpx; left: 0;
margin-top: -22rpx; padding: 40rpx;
} }
}
}
.bannarClass { .swiper-box {
position: relative; height: 300rpx;
top: 110px; border-radius: 16rpx !important;
left: 0; overflow: hidden !important;
padding: 40rpx; }
}
.swiper-box { .swiper-item {
height: 300rpx; display: flex;
border-radius: 16rpx !important; flex-direction: column;
overflow: hidden !important justify-content: center;
} align-items: center;
height: 300rpx;
color: #fff;
}
.swiper-item { .inspectionClass {
display: flex; position: relative;
flex-direction: column; top: 107px;
justify-content: center; left: 0;
align-items: center; margin: 0 40rpx;
height: 300rpx; // height: 236rpx;
color: #fff; background: linear-gradient(to right, #7b87fa, #4d5dfa);
} border-radius: 25rpx;
box-sizing: border-box;
padding: 30rpx;
}
.inspectionClass { // 消息通知栏
position: relative; .noticeClass {
top: 107px; display: flex;
left: 0; align-items: center;
margin: 0 40rpx; height: 80rpx;
// height: 236rpx; background: rgba(255, 255, 255, 0.1);
background: linear-gradient(to right, #7B87FA, #4D5DFA); border-radius: 16rpx;
border-radius: 25rpx; padding: 6rpx 20rpx;
box-sizing: border-box; margin-bottom: 30rpx;
padding: 30rpx; border: 1rpx solid rgba(255, 255, 255, 0.1);
} }
// 消息通知栏 // 左侧“消息通知”文字
.noticeClass { .notice-left {
display: flex; margin-right: 20rpx;
align-items: center; }
height: 80rpx;
background: rgba(255, 255, 255, 0.1);
border-radius: 16rpx;
padding: 6rpx 20rpx;
margin-bottom: 30rpx;
border: 1rpx solid rgba(255, 255, 255, 0.1);
}
// 左侧“消息通知”文字 .notice-icon {
.notice-left { width: 48rpx;
margin-right: 20rpx; height: 48rpx;
} }
.notice-icon { // 右侧公告滚动区
width: 48rpx; .notice-right {
height: 48rpx; flex: 1; // 占满剩余宽度
}
} // 深度修改uni-notice-bar样式
::v-deep .uni-noticebar {
background-color: transparent !important;
height: 100% !important;
line-height: 80rpx !important;
padding: 0 !important;
margin: 0 !important;
}
// 右侧公告滚动区 // 公告文字样式
.notice-right { ::v-deep .uni-noticebar__content {
flex: 1; // 占满剩余宽度 font-size: 26rpx !important;
} color: #fff !important;
padding: 0 !important;
}
// 深度修改uni-notice-bar样式 // 右侧箭头按钮
::v-deep .uni-noticebar { ::v-deep .uni-noticebar__more {
background-color: transparent !important; color: #fff !important;
height: 100% !important; font-size: 24rpx !important;
line-height: 80rpx !important; padding: 0 0 0 10rpx !important;
padding: 0 !important; }
margin: 0 !important;
}
// 公告文字样式 // 隐藏默认滚动动画的多余样式
::v-deep .uni-noticebar__content { ::v-deep .uni-noticebar__content-wrapper--scrollable {
font-size: 26rpx !important; left: 0 !important;
color: #fff !important; width: calc(100% - 30rpx) !important; // 给箭头留空间
padding: 0 !important; }
}
// 右侧箭头按钮 // 统计区布局
::v-deep .uni-noticebar__more { .statistics-wrap {
color: #fff !important; display: flex;
font-size: 24rpx !important; justify-content: space-between;
padding: 0 0 0 10rpx !important; align-items: center;
} padding: 0 20rpx;
}
// 隐藏默认滚动动画的多余样式 // 统计项样式
::v-deep .uni-noticebar__content-wrapper--scrollable { .statistics-item {
left: 0 !important; text-align: center;
width: calc(100% - 30rpx) !important; // 给箭头留空间 }
}
// 统计区布局 .statistics-item .num {
.statistics-wrap { font-size: 36rpx;
display: flex; font-weight: bold;
justify-content: space-between; color: #fff;
align-items: center; display: block;
padding: 0 20rpx; line-height: 1;
} margin-bottom: 10rpx;
}
// 统计项样式 .statistics-item .label {
.statistics-item { font-size: 24rpx;
text-align: center; color: #fff;
} opacity: 0.9;
}
.function-container {
background-color: #ffffff;
border-radius: 8rpx;
padding: 30rpx 20rpx;
box-sizing: border-box;
position: relative;
top: 123px;
left: 0;
margin: 0 40rpx;
}
.statistics-item .num { // 功能行布局
font-size: 36rpx; .function-row {
font-weight: bold; display: flex;
color: #fff; align-items: center;
display: block; margin-bottom: 20rpx;
line-height: 1;
margin-bottom: 10rpx;
}
.statistics-item .label { &:last-child {
font-size: 24rpx; margin-bottom: 0;
color: #fff; }
opacity: 0.9; }
}
.function-container {
background-color: #ffffff;
border-radius: 8rpx;
padding: 30rpx 20rpx;
box-sizing: border-box;
position: relative;
top: 123px;
left: 0;
margin: 0 40rpx;
}
// 功能行布局
.function-row {
display: flex;
align-items: center;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
}
.function-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%; // 一行4个，每个占25%
padding: 10rpx 0;
// 第二行只有1个，单独调整宽度
.function-row:nth-child(2) & {
width: 25%; // 和第一行图标宽度保持一致
}
}
// 功能图标样式
.item-icon {
width: 88rpx;
height: 88rpx;
margin-bottom: 10rpx;
}
// 功能文字样式
.item-text {
font-size: 24rpx;
color: #333333;
font-weight: 400;
text-align: center;
}
} .function-item {
</style> display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%; // 一行4个，每个占25%
padding: 10rpx 0;
// 第二行只有1个，单独调整宽度
.function-row:nth-child(2) & {
width: 25%; // 和第一行图标宽度保持一致
}
}
// 功能图标样式
.item-icon {
width: 88rpx;
height: 88rpx;
margin-bottom: 10rpx;
}
// 功能文字样式
.item-text {
font-size: 24rpx;
color: #333333;
font-weight: 400;
text-align: center;
}
}
</style>