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

feat：对接首页数据

Browse Source
This commit is contained in:
zjc
2024-12-27 14:50:53 +08:00
parent f7e15899a4
commit 88eb805c46
4 changed files with 84 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/home.js Normal file
View File

@@ -0,0 +1,9 @@
import request from './request'
// 彩云天气
export function getWeatherApi() {
return request({
url: '/api/largeScreen/source/weather',
method: 'get'
})
}

15
src/components/Header/index.vue
View File

@@ -27,11 +27,11 @@
</li>
</ul>
<div class="weather">
<span>25˚C-晴</span>
<span>{{ weatherData?.temperature }}-{{ weatherData?.skycon }}</span>
<span class="line">|</span>
<span>风速：A2-4级</span>
<span>风速：{{ weatherData?.windSpeed }}</span>
<span class="line">|</span>
<span>空气质量：A2-优</span>
<span>空气质量：{{ weatherData?.airQuality }}</span>
<span class="ml-20">{{ currentDate }}</span>
</div>
<div v-if="isBack" class="back" @click="handleBack">
@@ -45,6 +45,8 @@
import title2 from '@/assets/images/title-2.png'
import title2Select from '@/assets/images/title-2-select.png'
import { getWeatherApi } from '@/api/home'
let props = defineProps({
title: {
type: String,
@@ -74,6 +76,7 @@
const emit = defineEmits(['change'])
const router = useRouter()
let currentDate = ref('')
let weatherData = ref({})
const name = computed(() => {
if (!props.isSkip && props.navLeft.length > 0) {
@@ -108,7 +111,13 @@
emit('on-change', index)
}
}
const getWeather = async () => {
let res = await getWeatherApi()
weatherData.value = res.data
console.log(res, '====')
}
onMounted(() => {
getWeather()
getCurrentDate()
setInterval(() => {
getCurrentDate()

6
src/views/home/components/age.vue
View File

@@ -14,9 +14,9 @@
() => homeData.value?.userPortrait?.ageRate,
() => {
setOption({
tooltip: {
trigger: 'item'
},
// tooltip: {
// trigger: 'item'
// },
legend: {
orient: 'vertical',
left: '60%',

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

@@ -198,10 +198,16 @@
<div>调度</div>
<div>空余</div>
</div>
<div class="cell" v-for="(item, index) in homeData?.carShipData?.car.info" :key="index">
<div>{{ item.scenic_area }}</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
<div class="content">
<div
class="cell"
v-for="(item, index) in homeData?.carShipData?.car.info"
:key="index"
>
<div>{{ item.scenic_area }}</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
</div>
</div>
</div>
</div>
@@ -218,14 +224,16 @@
<div>调度</div>
<div>空余</div>
</div>
<div
class="cell"
v-for="(item, index) in homeData?.carShipData.ship.info"
:key="index"
>
<div>白帝城</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
<div class="content">
<div
class="cell"
v-for="(item, index) in homeData?.carShipData.ship.info"
:key="index"
>
<div>白帝城</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
</div>
</div>
</div>
</div>
@@ -244,18 +252,19 @@
<div class="item">
<div class="label">总入住</div>
<countup
class="value"
color="#02F9FA"
class="value success"
:end-val="homeData?.hotelData.info.total_guest_count || 0"
/>
</div>
<div class="item">
<div class="label">总入住率</div>
<countup
class="value"
color="#02F9FA"
:end-val="homeData?.hotelData.info.occupancy_rate || 0"
/>
<div class="flex align-center">
<countup
class="value success"
:end-val="homeData?.hotelData.info.occupancy_rate || 0"
/>
<span class="suffix">%</span>
</div>
</div>
</div>
<div>
@@ -387,7 +396,7 @@
& > div {
position: relative;
flex: 1;
height: vh(110);
height: vh(113);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-4.png');
@@ -434,6 +443,7 @@
width: vw(200);
height: vh(100);
z-index: 2;
background: rgba(0, 150, 255, 0.17);
.header {
display: flex;
height: vh(18);
@@ -447,6 +457,23 @@
color: #52b8ff;
}
}
.content {
overflow-y: auto;
height: vh(82);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
}
.cell {
display: flex;
height: vh(27);
@@ -507,13 +534,23 @@
font-size: vw(24);
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(10);
margin-top: vh(8);
margin-top: vh(6);
width: vw(360);
height: vh(140);
height: vh(156);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
}
@@ -521,7 +558,7 @@
}
.occupancy {
:deep(.title-3) {
margin-top: vh(10);
margin-top: vh(6);
}
}
.title1 {