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

fix 优化

Browse Source
This commit is contained in:
duanliang
2026-01-04 11:13:50 +08:00
parent 6533857dae
commit d571dadf8c
5 changed files with 226 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Title1/index.vue
View File

@@ -21,7 +21,7 @@
position: relative; position: relative;
.title { .title {
margin: vh(20) auto; margin: vh(20) auto;
width: vw(500); width: vw(450);
height: vh(66); height: vh(66);
display: flex; display: flex;
align-items: center; align-items: center;

5
src/layout/components/Header/index.vue
View File

@@ -169,7 +169,6 @@
router.push('/home') router.push('/home')
} }
const handleCommand = (item, type) => { const handleCommand = (item, type) => {
current.value = '' current.value = ''
if (type === 'hotel') { if (type === 'hotel') {
otherRightLabel.value = '其他场馆' otherRightLabel.value = '其他场馆'
@@ -546,7 +545,7 @@
height: vh(56); height: vh(56);
line-height: vh(46); line-height: vh(46);
font-weight: 600; font-weight: 600;
font-size: vw(28); font-size: font-vw(24);
text-align: center; text-align: center;
padding: 0 vw(50); padding: 0 vw(50);
color: rgba(208, 236, 255, 0.9); color: rgba(208, 236, 255, 0.9);
@@ -573,7 +572,7 @@
height: vh(56); height: vh(56);
line-height: vh(46); line-height: vh(46);
font-weight: 600; font-weight: 600;
font-size: vw(28); font-size: font-vw(24);
text-align: center; text-align: center;
color: rgba(208, 236, 255, 0.9); color: rgba(208, 236, 255, 0.9);
background-image: url('@/assets/images/title-3.png'); background-image: url('@/assets/images/title-3.png');

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

@@ -50,200 +50,209 @@
</div> </div>
<div class="footer"> <div class="footer">
<div class="flex"> <div class="flex">
<div class="flex-1"> <div class="flex-1">
<Title1 title="车船信息" class="title1" /> <Title1 title="车船信息" class="title1" />
</div> </div>
<!-- <div class="flex-1" > <div class="flex-1" >
<Title1 title="酒店信息" class="title1" /> <Title1 title="酒店信息" class="title1" />
</div> --> </div>
<div class="flex-1" >
<Title1 title="工单信息" class="title1" />
</div>
</div> </div>
<div class="flex"> <div style="display: flex;">
<div class="car-ship"> <!-- 车船信息 -->
<div class="mb-6"> <div class="flex" style="flex:1;">
<div class="car"> <div class="car-ship">
<div class="label">车总数</div> <div class="mb-6">
<div class="flex align-center"> <div class="car">
<countup class="value" :end-val="homeStore.carShipData?.car?.count || 0" /> <div class="label">车总数</div>
<span class="unit">辆</span> <div class="flex align-center">
</div> <countup class="value" :end-val="homeStore.carShipData?.car?.count || 0" />
</div> <span class="unit">辆</span>
<div class="table"> </div>
<div class="header"> </div>
<div>景区</div> <div class="table">
<div>运行</div> <div class="header">
<div>空余</div> <div>景区</div>
</div> <div>运行</div>
<div class="content"> <div>空余</div>
<vue3-seamless-scroll </div>
v-model="carMove" <div class="content">
:list="homeStore.carShipData?.car?.info" <vue3-seamless-scroll
:limitScrollNum="5" v-model="carMove"
:hover="true" :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" :step="0.2"
:copy-num="0" :wheel="true"
:wheel="true" :isWatch="true"
:isWatch="true" >
:isStop="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>
<div <p class="content">
class="cell" {{ item.title }}
v-for="(item, index) in homeStore.carShipData?.car?.info" </p>
:key="index" </div>
> <div v-else class="workorder-empty">
<div class="small-text">{{ item.name }}</div> 今日暂无工单
<div>{{ item.started_count }}<span class="unit-1">辆</span></div> </div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div> </vue3-seamless-scroll>
</div> </div>
</vue3-seamless-scroll> </div>
</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>
<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>
</div> </div>
</template> </template>
@@ -491,7 +500,7 @@
// flex: 1; // flex: 1;
& > div { & > div {
position: relative; position: relative;
height: vh(299); height: vh(265);
display: flex; display: flex;
align-items: center; align-items: center;
background-image: url('@/assets/images/bg-4.png'); background-image: url('@/assets/images/bg-4.png');
@@ -541,10 +550,10 @@
.table { .table {
position: absolute; position: absolute;
left: vw(200); left: vw(200);
// width: vw(350); width: vw(450);
width:85%; // width:5%;
// height: vh(196); // height: vh(196);
height:100%; // height:100%;
z-index: 2; z-index: 2;
background: rgba(0, 150, 255, 0.17); background: rgba(0, 150, 255, 0.17);
.header { .header {
@@ -626,7 +635,7 @@
flex:1; flex:1;
margin: 0 vw(6); margin: 0 vw(6);
.occupancy{ .occupancy{
height:100%; // height:vh(200);
} }
& > div:nth-child(1) { & > div:nth-child(1) {
display: flex; display: flex;
@@ -693,7 +702,7 @@
} }
.map { .map {
width: 100%; width: 100%;
height: vh(1170); height: vh(1240);
background-color: transparent; background-color: transparent;
} }
.box-3 { .box-3 {
@@ -811,18 +820,20 @@
} }
} }
.footer { .footer {
position: absolute;
width:vw(2630);
margin-top: vh(8); margin-top: vh(8);
// display: flex; // display: flex;
// height: vh(500); height: vh(650);
height:100%; // height:100%;
background-image: url('@/assets/images/bg-2.png'); background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%; background-size: 100% 100%;
flex-wrap: wrap; flex-wrap: wrap;
.left { .left {
// flex: 1; flex: 1;
display: flex; display: flex;
margin-top: vh(14); // margin-top: vh(14);
width:100%; // width:100%;
& > div { & > div {
flex: 1; flex: 1;
height: vh(180); height: vh(180);
@@ -841,7 +852,7 @@
.label { .label {
margin-bottom: vh(10); margin-bottom: vh(10);
font-weight: 400; font-weight: 400;
font-size: font-vw(20); font-size: font-vw(18);
color: #ffffff; color: #ffffff;
} }
.countup-wrap { .countup-wrap {
@@ -863,7 +874,7 @@
.text { .text {
margin-right: vw(10); margin-right: vw(10);
font-weight: 400; font-weight: 400;
font-size: font-vw(20); font-size: font-vw(18);
color: #ffffff; color: #ffffff;
} }
.progress { .progress {

6
src/views/home/components/box-3.vue
View File

@@ -121,7 +121,7 @@
</div> </div>
</div> </div>
<div class="flex"> <div class="flex" v-if="false">
<!-- <div class="flex-1"> <!-- <div class="flex-1">
<Title1 title="车船信息" class="title1" /> <Title1 title="车船信息" class="title1" />
</div> --> </div> -->
@@ -130,7 +130,7 @@
</div> </div>
</div> </div>
<div class="flex"> <div class="flex" v-if="false">
<div class="car-ship" v-if="false"> <div class="car-ship" v-if="false">
<div class="mb-6"> <div class="mb-6">
<div class="car"> <div class="car">
@@ -304,7 +304,7 @@
// height: vh(2056); // height: vh(2056);
padding-left: vw(8); padding-left: vw(8);
box-sizing: border-box; box-sizing: border-box;
background-image: url('@/assets/images/bg-5.png'); // background-image: url('@/assets/images/bg-5.png');
background-size: 100% 100%; background-size: 100% 100%;
.traffic-info { .traffic-info {
// height: vh(80); // height: vh(80);

9
src/views/home/components/occupancy.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<!-- 酒店入住人数及入住率 --> <!-- 酒店入住人数及入住率 -->
<div class="occupancy" :id="id" /> <div class="occupancyNew" :id="id" />
</template> </template>
<script setup> <script setup>
@@ -19,10 +19,11 @@
watch( watch(
() => props.list, () => props.list,
(val) => { (val) => {
if (val.length > 0) { if (val.length > 0) {
setTimeout(() => { setTimeout(() => {
init() init()
}, 1000) }, 1500)
} }
}, },
{ immediate: true } { immediate: true }
@@ -190,8 +191,8 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.occupancy { .occupancyNew {
width: 100%; width: 100%;
height: vh(340); height: vh(360);
} }
</style> </style>