fix 优化
This commit is contained in:
duanliang
@@ -50,200 +50,209 @@
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div>
|
||||
<!-- <div class="flex-1" >
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div> -->
|
||||
<div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div>
|
||||
<div class="flex-1" >
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div>
|
||||
<div class="flex-1" >
|
||||
<Title1 title="工单信息" class="title1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="car-ship">
|
||||
<div class="mb-6">
|
||||
<div class="car">
|
||||
<div class="label">车总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="homeStore.carShipData?.car?.count || 0" />
|
||||
<span class="unit">辆</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>运行</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<vue3-seamless-scroll
|
||||
v-model="carMove"
|
||||
:list="homeStore.carShipData?.car?.info"
|
||||
:limitScrollNum="5"
|
||||
:hover="true"
|
||||
<div style="display: flex;">
|
||||
<!-- 车船信息 -->
|
||||
<div class="flex" style="flex:1;">
|
||||
<div class="car-ship">
|
||||
<div class="mb-6">
|
||||
<div class="car">
|
||||
<div class="label">车总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="homeStore.carShipData?.car?.count || 0" />
|
||||
<span class="unit">辆</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>运行</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<vue3-seamless-scroll
|
||||
v-model="carMove"
|
||||
:list="homeStore.carShipData?.car?.info"
|
||||
:limitScrollNum="5"
|
||||
:hover="true"
|
||||
:step="0.2"
|
||||
:copy-num="0"
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
:isStop="true"
|
||||
>
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeStore.carShipData?.car?.info"
|
||||
:key="index"
|
||||
>
|
||||
<div class="small-text">{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ship">
|
||||
<div class="label">船总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="homeStore.carShipData?.ship?.count || 0" />
|
||||
<span class="unit">艘</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>运行</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<vue3-seamless-scroll
|
||||
v-model="shipMove"
|
||||
:list="homeStore.carShipData?.ship?.info"
|
||||
:limitScrollNum="5"
|
||||
:hover="true"
|
||||
:step="0.2"
|
||||
:copy-num="0"
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
:isStop="true"
|
||||
>
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeStore.carShipData?.ship?.info"
|
||||
:key="index"
|
||||
>
|
||||
<div class="small-text">{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">艘</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">艘</span></div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="left">
|
||||
<div>
|
||||
<div class="flex justify-center pt-30">
|
||||
<div class="item">
|
||||
<p class="label">今日工单总条数</p>
|
||||
<countup :end-val="homeStore.wordkOrderData.toDayData.count" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">工单完成数</p>
|
||||
<countup class="complete" :end-val="homeStore.wordkOrderData.toDayData.end" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-1">
|
||||
<el-progress
|
||||
:percentage="parseFloat(homeStore.wordkOrderData.toDayData.rate)"
|
||||
:show-text="false"
|
||||
/>
|
||||
</div>
|
||||
<span class="value">{{ homeStore.wordkOrderData.toDayData.rate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="item">
|
||||
<p class="label">紧急工单数</p>
|
||||
<countup class="error" :end-val="homeStore.wordkOrderData.warnData.count" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">紧急工单完成数</p>
|
||||
<countup class="complete" :end-val="homeStore.wordkOrderData.warnData.end" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-2">
|
||||
<el-progress
|
||||
:percentage="parseFloat(homeStore.wordkOrderData.warnData.rate)"
|
||||
:show-text="false"
|
||||
/>
|
||||
</div>
|
||||
<span class="value">{{ homeStore.wordkOrderData.warnData.rate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<vue3-seamless-scroll
|
||||
class="right"
|
||||
:list="homeStore.wordkOrderList"
|
||||
:limitScrollNum="3"
|
||||
:hover="true"
|
||||
:step="0.2"
|
||||
:copy-num="0"
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
:isStop="true"
|
||||
>
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeStore.carShipData?.car?.info"
|
||||
:key="index"
|
||||
>
|
||||
<div class="small-text">{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ship">
|
||||
<div class="label">船总数</div>
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="homeStore.carShipData?.ship?.count || 0" />
|
||||
<span class="unit">艘</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>景区</div>
|
||||
<div>运行</div>
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<vue3-seamless-scroll
|
||||
v-model="shipMove"
|
||||
:list="homeStore.carShipData?.ship?.info"
|
||||
:limitScrollNum="5"
|
||||
:hover="true"
|
||||
:step="0.2"
|
||||
:copy-num="0"
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
:isStop="true"
|
||||
>
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeStore.carShipData?.ship?.info"
|
||||
:key="index"
|
||||
>
|
||||
<div class="small-text">{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">艘</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">艘</span></div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
>
|
||||
<div v-if="homeStore.wordkOrderList.length>0" class="item" v-for="(item, index) in homeStore.wordkOrderList" :key="index">
|
||||
<span :class="`item-tag--${item.level}`">{{ item.level_text }}</span>
|
||||
<p class="content">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="workorder-empty">
|
||||
今日暂无工单
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel" v-if="false" >
|
||||
|
||||
<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-30">
|
||||
<div class="item">
|
||||
<p class="label">今日工单总条数</p>
|
||||
<countup :end-val="homeStore.wordkOrderData.toDayData.count" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">工单完成数</p>
|
||||
<countup class="complete" :end-val="homeStore.wordkOrderData.toDayData.end" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-1">
|
||||
<el-progress
|
||||
:percentage="parseFloat(homeStore.wordkOrderData.toDayData.rate)"
|
||||
:show-text="false"
|
||||
/>
|
||||
</div>
|
||||
<span class="value">{{ homeStore.wordkOrderData.toDayData.rate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="item">
|
||||
<p class="label">紧急工单数</p>
|
||||
<countup class="error" :end-val="homeStore.wordkOrderData.warnData.count" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="label">紧急工单完成数</p>
|
||||
<countup class="complete" :end-val="homeStore.wordkOrderData.warnData.end" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-box">
|
||||
<span class="text">工单完成数</span>
|
||||
<div class="progress-2">
|
||||
<el-progress
|
||||
:percentage="parseFloat(homeStore.wordkOrderData.warnData.rate)"
|
||||
:show-text="false"
|
||||
/>
|
||||
</div>
|
||||
<span class="value">{{ homeStore.wordkOrderData.warnData.rate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="false">
|
||||
<vue3-seamless-scroll
|
||||
class="right"
|
||||
:list="homeStore.wordkOrderList"
|
||||
:limitScrollNum="3"
|
||||
:hover="true"
|
||||
:step="0.2"
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
>
|
||||
<div v-if="homeStore.wordkOrderList.length>0" class="item" v-for="(item, index) in homeStore.wordkOrderList" :key="index">
|
||||
<span :class="`item-tag--${item.level}`">{{ item.level_text }}</span>
|
||||
<p class="content">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="workorder-empty">
|
||||
今日暂无工单
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -491,7 +500,7 @@
|
||||
// flex: 1;
|
||||
& > div {
|
||||
position: relative;
|
||||
height: vh(299);
|
||||
height: vh(265);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
@@ -541,10 +550,10 @@
|
||||
.table {
|
||||
position: absolute;
|
||||
left: vw(200);
|
||||
// width: vw(350);
|
||||
width:85%;
|
||||
width: vw(450);
|
||||
// width:5%;
|
||||
// height: vh(196);
|
||||
height:100%;
|
||||
// height:100%;
|
||||
z-index: 2;
|
||||
background: rgba(0, 150, 255, 0.17);
|
||||
.header {
|
||||
@@ -626,7 +635,7 @@
|
||||
flex:1;
|
||||
margin: 0 vw(6);
|
||||
.occupancy{
|
||||
height:100%;
|
||||
// height:vh(200);
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
display: flex;
|
||||
@@ -693,7 +702,7 @@
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: vh(1170);
|
||||
height: vh(1240);
|
||||
background-color: transparent;
|
||||
}
|
||||
.box-3 {
|
||||
@@ -811,18 +820,20 @@
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
width:vw(2630);
|
||||
margin-top: vh(8);
|
||||
// display: flex;
|
||||
// height: vh(500);
|
||||
height:100%;
|
||||
height: vh(650);
|
||||
// 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(14);
|
||||
width:100%;
|
||||
// margin-top: vh(14);
|
||||
// width:100%;
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(180);
|
||||
@@ -841,7 +852,7 @@
|
||||
.label {
|
||||
margin-bottom: vh(10);
|
||||
font-weight: 400;
|
||||
font-size: font-vw(20);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
.countup-wrap {
|
||||
@@ -863,7 +874,7 @@
|
||||
.text {
|
||||
margin-right: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: font-vw(20);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
.progress {
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex" v-if="false">
|
||||
<!-- <div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div> -->
|
||||
@@ -130,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex" v-if="false">
|
||||
<div class="car-ship" v-if="false">
|
||||
<div class="mb-6">
|
||||
<div class="car">
|
||||
@@ -304,7 +304,7 @@
|
||||
// height: vh(2056);
|
||||
padding-left: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-5.png');
|
||||
// background-image: url('@/assets/images/bg-5.png');
|
||||
background-size: 100% 100%;
|
||||
.traffic-info {
|
||||
// height: vh(80);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 酒店入住人数及入住率 -->
|
||||
<div class="occupancy" :id="id" />
|
||||
<div class="occupancyNew" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -19,10 +19,11 @@
|
||||
watch(
|
||||
() => props.list,
|
||||
(val) => {
|
||||
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}, 1500)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
@@ -190,8 +191,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.occupancy {
|
||||
.occupancyNew {
|
||||
width: 100%;
|
||||
height: vh(340);
|
||||
height: vh(360);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user