house布局

components/ColorItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="color-item">
+	<view class="color-item" :class="size">
 		<div class="left-color" :style="{ background: item.leftColor }"></div>
 		<div class="rigth-color">
 			<div :style="{ background: item.rightTopColor }"></div>
@@ -17,6 +17,10 @@
 				type: Boolean,
 				default: true,
 			},
+			size: {
+				type: String,
+				default: '',
+			},
 			item: {
 				type: Object,
 				default: () => {}
@@ -69,4 +73,11 @@
 			font-size: 28rpx;
 		}
 	}
+
+	.color-medium {
+		position: relative;
+		width: 120rpx;
+		height: 40rpx;
+		display: inline-block;
+	}
 </style>

components/NavigationGeneral/index.vue

@@ -1,7 +1,9 @@
 <template>
 	<view class="app-container">
 		<u-navbar back-text="返回" :title="title" :is-back="isBack" :is-fixed="true" :background="background"
-			title-color="#fff"></u-navbar>
+			title-color="#fff" back-icon-color="#fff" :back-text-style="{
+				color:'#fff'
+			}"></u-navbar>
 		<slot></slot>
 	</view>
 </template>
@@ -13,10 +15,15 @@
 				type: String,
 				default: '标题'
 			},
+			titleWidth: {
+				type: String,
+				default: '150px'
+			},
 			isBack: {
 				type: Boolean,
 				default: true
 			},
+
 		},
 		name: "NavigationGeneral",
 		data() {

pages.json

@@ -73,6 +73,13 @@
 		"style": {
 			"navigationBarTitleText": "浏览文本"
 		}
+	},
+	{
+		"path" : "pages/building/building",
+		"style" : 
+		{
+			"navigationBarTitleText" : ""
+		}
 	}],
 	"tabBar": {
 		"color": "#000000",

pages/building/building.vue

@@ -0,0 +1,161 @@
+<template>
+	<navigation-general :title="title">
+		<view class="building-list" :style="{height: `calc(100% - ${boxTop}rpx)`}">
+
+			<view class="house">
+				<view class="house-list">
+					<view class="house-rows" v-for="(item,index) in groupedRooms" :key="index">
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<view class="floor-item">{{buildingInfo.floor - index}}</view>
+						<!-- 	<color-item :item="house" v-for="house in item" :key="house.id"
+							:showColorName="false"></color-item> -->
+					</view>
+				</view>
+				<view class="house-unit"></view>
+			</view>
+		</view>
+	</navigation-general>
+</template>
+
+<script>
+	import {
+		getBuilding,
+	} from '@/api/taicangpop/building'
+	import {
+		handleColor
+	} from '@/utils/handlerColor.js'
+	import {
+		getNumNew
+	} from '@/api/taicangpop/data'
+	export default {
+		data() {
+			return {
+				boxTop: 0,
+				queryParams: {
+					buildingId: undefined
+				},
+				title: '',
+				buildingInfo: {},
+				newHouseList: [],
+				totalHouse: 0,
+			};
+		},
+		computed: {
+			groupedRooms() {
+				if (this.newHouseList.length == 0) return
+
+				// 初始化每层楼的数组
+				let floors = Array.from({
+					length: this.buildingInfo.floor
+				}, () => [])
+				// 遍历房间数据
+				this.newHouseList.forEach((room) => {
+					// 提取房间号前几位作为楼层号
+					let floor = (parseInt(room.name) / 100) | 0
+					// 将房间加入对应楼层数组
+					if (floor > 0 && floor <= this.buildingInfo.floor) {
+						floors[floor - 1].push(handleColor(room))
+					}
+				})
+
+				// 对每层楼的房间进行排序
+				floors.forEach((floorRooms) => {
+					floorRooms.sort((a, b) => parseInt(a.name) - parseInt(b.name))
+				})
+				uni.hideLoading()
+				return floors.reverse()
+			},
+		},
+		onLoad(option) {
+			const systemData = this.$u.sys()
+			this.boxTop = (systemData.statusBarHeight + 44) * 2
+			this.title = option.deptname
+			this.queryParams.buildingId = option.buildingId
+			this.getBuildingInfo()
+
+		},
+		methods: {
+			//楼信息
+			async getBuildingInfo() {
+				const res = await getBuilding(this.queryParams.buildingId)
+				this.buildingInfo = res.data
+				this.getAllHouse()
+			},
+			//获取所有的户
+			async getAllHouse() {
+				// uni.showLoading({
+				// 	title: '加载中'
+				// })
+				let res = await getNumNew({
+					buildingId: this.queryParams.buildingId
+				})
+				this.newHouseList = res.data
+				this.totalHouse = this.newHouseList.length
+			},
+		}
+	}
+</script>
+<style lang="scss">
+	page {
+		height: 100%;
+		background: #113666;
+	}
+</style>
+<style lang="scss" scoped>
+	.app-container {
+		height: 100%;
+	}
+
+	.building-list {
+		width: 1000px;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		overflow-y: auto;
+		overflow-x: auto;
+
+		.house {
+			width: 100%;
+			height: 100%;
+			border: 1px solid red;
+
+			.house-list {
+				height: 100%;
+			}
+		}
+
+		.house-rows {
+			height: 40rpx;
+			display: flex;
+			justify-content: flex-start;
+			margin-bottom: 20rpx;
+
+			.floor-item {
+				height: 100%;
+				width: 80rpx;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				color: #fff;
+				text-align: center;
+				background-color: #409eff;
+			}
+
+			&>view {
+				margin-right: 10rpx;
+			}
+		}
+	}
+</style>

pages/index.vue

@@ -6,7 +6,7 @@
 		</u-dropdown>
 		<scroll-view scroll-y="true" :style="{height: `calc(100% - ${boxTop}rpx)`}" @scrolltolower="scrolltolower">
 			<div class="building-list">
-				<view class="building-item" v-for="item in buildingList" :key="item.id">
+				<view class="building-item" v-for="item in buildingList" :key="item.id" @click="handlerBuilding(item)">
 					<text class="building-name">{{item.deptname}}{{item.name }}</text>
 					<text class="yipaimo">已排查0户</text>
 					<text class="weipaimo">未排查0户</text>
@@ -64,7 +64,19 @@
 			this.getBuildList()
 		},
 		methods: {
+			//跳转楼栋页面
+			handlerBuilding(item) {
+				console.log(item)
+				this.$u.route({
+					url: 'pages/building/building',
+					params: {
+						buildingId: item.id,
+						deptname: item.deptname + item.name
+					}
+				})
+			},
 
+			//更新tabar
 			setBar() {
 				this.$store.commit('SET_DEPT_ID', this.queryParams.deptId)
 				this.$store.dispatch('getWarnNum', {