楼栋房子同步

main
许宏杰 6 months ago
parent ad3410cb7a
commit f9b877efa6

@ -6,6 +6,20 @@
<div class="rigth-bottom" v-show="item.color == 'HF' || item.color == 'NF'"></div>
</div>
<view v-show="showColorName" class="color-name">{{item.color}}</view>
<view v-show="showBuildingName" class="color-building-name">{{item.name.replace("","")}}</view>
<!-- 红绿点 -->
<view class="color-warn" v-show="showBuildingName">
<view class="warn-item" style="background: red" v-show="item.daycount > 0"></view>
<view class="warn-item" style="background: green"
v-show="item.daycount == '0'"></view>
</view>
<!-- 四个is -->
<view class="color-is-type" v-show="showBuildingName">
<image src="../../static/images/isd.png" mode="" v-show="item.is_d"></image>
<image src="../../static/images/isj.png" mode="" v-show="item.is_j"></image>
<image src="../../static/images/isx.png" mode="" v-show="item.is_x"></image>
<image src="../../static/images/isk.png" mode="" v-show="item.is_k"></image>
</view>
</view>
</template>
@ -13,6 +27,11 @@
export default {
name: "ColorItem",
props: {
showBuildingName: {
type: Boolean,
default: false,
},
showColorName: {
type: Boolean,
default: true,
@ -42,7 +61,42 @@
border: 2rpx solid #fff;
display: flex;
align-items: center;
.color-building-name{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
font-size: 30rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.color-warn{
position: absolute;
bottom: 0;
right: 0;
display: flex;
align-items: center;
&>view{
height: 20rpx;
width: 20rpx;
border-radius: 50%;
border: 1px solid #fff;
}
}
.color-is-type{
position: absolute;
top: -20rpx;
left:0;
&>image{
height: 20rpx;
width: 20rpx;
margin-right: 6rpx;
}
}
.left-color,
.rigth-color {
flex: 1;
@ -74,10 +128,5 @@
}
}
.color-medium {
position: relative;
width: 120rpx;
height: 40rpx;
display: inline-block;
}
</style>

@ -1,31 +1,19 @@
<template>
<navigation-general :title="title">
<view class="building-list" :style="{height: `calc(100% - ${boxTop}rpx)`}">
<view class="building-list" >
<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 class="house-c">
<view class="c-item" v-for="(item,index) in buildingInfo.floor" :key="index">{{buildingInfo.floor - index}}</view>
</view>
<scroll-view class="house-list" scroll-x="true" scroll-left="120">
<view class="list-scroll-x" :style="handlerWidth">
<view class="color-rows" v-for="(item,index) in groupedRooms" :key="index">
<color-item :showBuildingName="true" :showColorName="false" :item="house" v-for="house in item" :key="house.id"></color-item>
</view>
</view>
</scroll-view>
</view>
</navigation-general>
</template>
@ -54,6 +42,12 @@
};
},
computed: {
handlerWidth(){
return{
width: (this.buildingInfo.house+1) * 122 + 'rpx'
}
},
groupedRooms() {
if (this.newHouseList.length == 0) return
@ -96,9 +90,10 @@
},
//
async getAllHouse() {
// uni.showLoading({
// title: ''
// })
uni.showLoading({
title: '加载中',
mask:true,
})
let res = await getNumNew({
buildingId: this.queryParams.buildingId
})
@ -109,53 +104,50 @@
}
</script>
<style lang="scss">
page {
height: 100%;
background: #113666;
}
page{
background: #113666;
}
</style>
<style lang="scss" scoped>
.app-container {
height: 100%;
}
.building-list {
width: 1000px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
overflow-y: auto;
overflow-x: auto;
// /
.house-c{
.house {
width: 100%;
height: 100%;
border: 1px solid red;
.house-list {
height: 100%;
.c-item{
width: 120rpx;
text-align: center;
line-height: 60rpx;
height: 60rpx;
font-size: 28rpx;
color: #fff;
background-color: rgb(64, 158, 255);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
}
.house-rows {
height: 40rpx;
display: flex;
justify-content: flex-start;
margin-bottom: 20rpx;
.floor-item {
//
.house-list{
background: #113666;
height: 100%;
.list-scroll-x{
height: 100%;
width: 80rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #fff;
text-align: center;
background-color: #409eff;
}
.color-rows{
width: 100%;
display: flex;
height: 60rpx;
align-items: center;
.color-item{
width: 100rpx;
margin-left: 20rpx;
}
&>view {
margin-right: 10rpx;
}
}
}
}
</style>

@ -71,7 +71,7 @@
url: 'pages/building/building',
params: {
buildingId: item.id,
deptname: item.deptname + item.name
deptname: item.name
}
})
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Loading…
Cancel
Save