今日巡检-前端搭建

wuye-manager-uniapp/components/tabs/tabs.vue

@@ -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>

wuye-manager-uniapp/pageSubPack/inspection/inspection_record.vue

@@ -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>

wuye-manager-uniapp/pages.json

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

wuye-manager-uniapp/pages/index/index.vue

@@ -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>
+                <image src="/static/imgs/三角形.png" style="height: 100%; width: 100%"></image>
-							</view>
+              </view>
-
             </view>
           </view>
         </view>
-
       </view>
     </view>
 
     <!-- banner -->
     <view class="bannarClass">
-			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="bannerList" :current="current"
+      <uni-swiper-dot
-				:mode="mode">
+        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
+          <uni-notice-bar
-						color="#fff" background-color="transparent" moreColor="#fff" no-border>
+            :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 {
+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 currentCommunity = ref('碧桂园小区')
-	const current = ref(0)
+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 goToOneOpenDoor = () => {
-	// 跳转到 今日巡检
-	const goToDaysInspection = () => {
   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>