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": {
"navigationBarTitleText": "巡检上报"
}
},
{
"path": "inspection_record",
"style": {
"navigationBarTitleText": "巡检记录"
}
}
]
},
@@ -157,8 +163,8 @@
},
"condition": {
"list": [{
"name": "巡检上报",
"path": "pageSubPack/inspection/inspection_upload"
"name": "巡检记录",
"path": "pageSubPack/inspection/inspection_record"
}]
},
"tabBar": {

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

@@ -13,30 +13,33 @@
<view class="location-area">
<!-- 定位图标 -->
<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 class="community-selector">
<text class="community-name">{{ currentCommunity }}</text>
<view class="community-icon">
<image src="/static/imgs/三角形.png" style="height: 100%;width: 100%;"></image>
</view>
<image src="/static/imgs/三角形.png" style="height: 100%; width: 100%"></image>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- banner -->
<view class="bannarClass">
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="bannerList" :current="current"
:mode="mode">
<uni-swiper-dot
class="uni-swiper-dot-box"
@clickItem="clickItem"
:info="bannerList"
:current="current"
:mode="mode"
>
<swiper class="swiper-box" :current="swiperDotIndex" :autoplay="true">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<view class="swiper-item">
<image :src="item.img" style="width: 100%;height: 100%;"></image>
<image :src="item.img" style="width: 100%; height: 100%"></image>
</view>
</swiper-item>
</swiper>
@@ -52,25 +55,34 @@
</view>
<!-- 右侧滚动公告 -->
<view class="notice-right" @click="getNoticeMore">
<uni-notice-bar :text="noticeText" type="line" :showIcon="false" show-get-more scrollable
color="#fff" background-color="transparent" moreColor="#fff" no-border>
<uni-notice-bar
:text="noticeText"
type="line"
:showIcon="false"
show-get-more
scrollable
color="#fff"
background-color="transparent"
moreColor="#fff"
no-border
>
</uni-notice-bar>
</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">25</text>
<text class="label">巡检点</text>
</view>
<view class="statistics-item">
<text class="num">5</text>
<text class="label">巡检点</text>
<text class="label">待巡检点</text>
</view>
<view class="statistics-item">
<text class="num">25</text>
<text class="label">巡检点</text>
<text class="label">已巡检点</text>
</view>
</view>
</view>
@@ -96,102 +108,87 @@
</view>
</view>
<!-- 2 -->
<view class="function-row" style="margin-top: 2px;">
<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>
<script setup>
import {
ref
} from 'vue'
import {
onLoad,
onUnload
} from '@dcloudio/uni-app'
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
// 列表数据状态
const current = ref(0)
// 列表数据状态
const current = ref(0)
const currentCommunity = ref('碧桂园小区')
const bannerList = ref([
const currentCommunity = ref('碧桂园小区')
const bannerList = ref([
{
img: '/static/imgs/banner1.png'
},
{
img: '/static/bannar2.png'
},
])
const noticeText = ref('公告公告本小区今天安装了摄像头')
// =======方法=======
// 跳转小区
const navigateToPage =() =>{
uni.navigateTo({
url:"/pageSubPack/notice-list/select-community"
})
}
// 跳转公告
const getNoticeMore = () => {
])
const noticeText = ref('公告公告本小区今天安装了摄像头')
// =======方法=======
// 跳转小区
const navigateToPage = () => {
uni.navigateTo({
url: "/pageSubPack/notice-list/notice-list"
url: '/pageSubPack/notice-list/select-community'
})
}
// 跳转一键开门
const goToOneOpenDoor = ()=>{
}
// 跳转公告
const getNoticeMore = () => {
uni.navigateTo({
url: "/pageSubPack/oneClickOpen/oneClickOpen"
url: '/pageSubPack/notice-list/notice-list'
})
}
// 跳转到 今日巡检
const goToDaysInspection = () => {
}
// 跳转一键开门
const goToOneOpenDoor = () => {
uni.navigateTo({
url: "/pageSubPack/inspection/toDays_inscpection"
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) => {
// 接收选择小区返回的参数
const slelctHomeData = data => {
// console.log('收到B页面返回的数据：', data)
currentCommunity.value = data.name
}
onLoad(() => {
}
onLoad(() => {
// 绑定全局事件监听
uni.$on('confirm', slelctHomeData)
})
})
// 页面销毁时移除监听（防止内存泄漏）
onUnload(() => {
// 页面销毁时移除监听（防止内存泄漏）
onUnload(() => {
uni.$off('confirm', slelctHomeData)
})
})
// 方法逻辑
// 方法逻辑
</script>
<style lang="scss" scoped>
.content-class {
.content-class {
// margin: 0 20rpx;
// padding: 2rpx;
background-color: #f9f9f9;
@@ -205,9 +202,8 @@
height: 400rpx;
width: 100%;
// background-color: #C0E4FB;
background: repeating-linear-gradient(to right, #EDF4FA, #C0E4FB);
background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb);
position: absolute;
}
.status_bar {
@@ -290,7 +286,7 @@
.swiper-box {
height: 300rpx;
border-radius: 16rpx !important;
overflow: hidden !important
overflow: hidden !important;
}
.swiper-item {
@@ -308,7 +304,7 @@
left: 0;
margin: 0 40rpx;
// height: 236rpx;
background: linear-gradient(to right, #7B87FA, #4D5DFA);
background: linear-gradient(to right, #7b87fa, #4d5dfa);
border-radius: 25rpx;
box-sizing: border-box;
padding: 30rpx;
@@ -334,7 +330,6 @@
.notice-icon {
width: 48rpx;
height: 48rpx;
}
// 右侧公告滚动区
@@ -448,6 +443,5 @@
font-weight: 400;
text-align: center;
}
}
}
</style>