lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/views/home/components/box-2.vue
View File

@@ -49,9 +49,55 @@
<div class="map" id="map" />
</div>
<div class="footer">
<div class="left">
<div class="flex">
<!-- <div class="flex-1">
<Title1 title="车船信息" class="title1" />
</div> -->
<div class="flex-1" >
<Title1 title="酒店信息" class="title1" />
</div>
</div>
<div class="hotel" >
<div>
<div class="item">
<div class="label">接入总数</div>
<countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" />
</div>
<div class="item">
<div class="label">房间总数</div>
<countup class="value" :end-val="homeStore.hotelData?.info?.total_room_count || 0" />
</div>
<div class="item">
<div class="label">当前入住总数</div>
<countup
class="value success"
:end-val="homeStore.hotelData?.info?.total_guest_count || 0"
/>
</div>
<div class="item">
<div class="label">当前入住率</div>
<div class="flex align-center">
<countup
class="value success"
:end-val="homeStore.hotelData?.info?.occupancy_rate || 0"
/>
<span class="suffix">%</span>
</div>
</div>
</div>
<div>
<div class="occupancy">
<Title3 title="酒店入住率" />
</div>
<occupancy :list="homeStore.hotelData?.list" />
</div>
</div>
<div class="left" v-if="false">
<div>
<div class="flex justify-center pt-10">
<div class="flex justify-center pt-30">
<div class="item">
<p class="label">今日工单总条数</p>
<countup :end-val="homeStore.wordkOrderData.toDayData.count" />
@@ -95,7 +141,7 @@
</div>
</div>
</div>
<div>
<div v-if="false">
<vue3-seamless-scroll
class="right"
:list="homeStore.wordkOrderList"
@@ -126,7 +172,7 @@
import ScrollNumber from '@/components/ScrollNumber/index.vue'
import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
import occupancy from './occupancy'
import icon8 from '@/assets/images/icon-8.png'
import icon9 from '@/assets/images/icon-9.png'
import icon10 from '@/assets/images/icon-10.png'
@@ -358,11 +404,60 @@
</script>
<style lang="scss" scoped>
.hotel {
flex:1;
margin: 0 vw(6);
.occupancy{
height:100%;
}
& > div:nth-child(1) {
display: flex;
// width: vw(360);
height: vh(120);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.label {
font-weight: 400;
font-size: font-vw(18);
color: rgba(255, 255, 255, 0.9);
}
.value {
margin-top: vh(10);
font-weight: bold;
font-size: font-vw(22);
color: #ffffff;
}
.success {
color: #02f9fa;
}
.suffix {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
color: #02f9fa;
}
}
}
& > div:nth-child(2) {
padding-top: vh(6);
margin-top: vh(6);
// width: vw(360);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
}
.workorder-empty{
text-align: center;
color: #ffffff;
line-height: vh(90);
font-size: vw(20);
font-size: font-vw(20);
}
.coll-box{
width:initial !important;
@@ -380,15 +475,17 @@
}
.map {
width: 100%;
height: vh(700);
height: vh(1130);
background-color: transparent;
}
.box-3 {
width: vw(1614);
height: vh(950);
// width: vw(1400);
// height: vh(2050);
height:100%;
flex:1;
margin-top: vh(120);
.header {
width: vw(1614);
// width: vw(1400);
height: vh(128);
padding: 0 vw(90);
box-sizing: border-box;
@@ -417,12 +514,12 @@
.label {
margin-bottom: vh(20);
font-weight: 400;
font-size: vw(18);
font-size: font-vw(18);
color: rgba(255, 255, 255, 0.9);
}
.value {
font-weight: bold;
font-size: vw(28);
font-size: font-vw(28);
line-height: vh(33);
&--error {
@extend .value;
@@ -444,7 +541,7 @@
margin-right: vw(4);
border-radius: vw(4);
color: #ffffff;
font-size: vw(28);
font-size: font-vw(28);
font-weight: bold;
display: inline-flex;
align-items: center;
@@ -462,7 +559,7 @@
height: vw(40);
margin-right: vw(4);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #ffffff;
display: flex;
align-items: center;
@@ -496,18 +593,22 @@
}
}
.footer {
margin-top: vh(4);
display: flex;
height: vh(120);
margin-top: vh(8);
// display: flex;
// height: vh(500);
height:100%;
background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
flex-wrap: wrap;
.left {
flex: 1;
// flex: 1;
display: flex;
margin-top: vh(4);
margin-top: vh(14);
width:100%;
& > div {
flex: 1;
height: vh(110);
height: vh(180);
// height:100%;
margin-right: vw(6);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
@@ -517,16 +618,17 @@
flex-direction: column;
align-items: center;
justify-content: center;
// padding-top:vh(50);
}
.label {
margin-bottom: vh(10);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #ffffff;
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-size: font-vw(28);
font-weight: bold;
}
.error {
@@ -543,13 +645,13 @@
.text {
margin-right: vw(10);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #ffffff;
}
.progress {
width: vw(100);
:deep(.el-progress-bar__outer) {
height: vh(4) !important;
height: vh(8) !important;
background-color: #0858ae !important;
}
}
@@ -568,7 +670,7 @@
.value {
margin-left: vw(10);
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #ffffff;
}
}
@@ -577,16 +679,17 @@
.right {
margin-top: vh(4);
padding: vh(10) vw(10);
height: vh(106);
width: vw(1040);
// height: vh(106);
height:100%;
width: 100%;
overflow: hidden;
.item {
display: flex;
margin-bottom: vh(10);
&-tag {
padding: 0 vw(16);
padding:vw(10);
font-weight: bold;
font-size: vw(14);
font-size: font-vw(20);
color: #fff;
display: flex;
align-items: center;
@@ -608,14 +711,16 @@
.content {
margin-left: vw(4);
padding: 0 vw(10);
width: vw(950);
height: vh(24);
line-height: vh(24);
width: vw(1350);
flex:1;
padding:vw(15);
// height: vh(44);
// line-height: vh(44);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #ffffff;
border-radius: vw(2);
background: rgba(0, 150, 255, 0.28);