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
2025-01-08 18:05:12 +08:00
parent ab1ab210a9
commit 9ee304c8c2
39 changed files with 2081 additions and 1926 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/home/components/box-1.vue
View File

@@ -5,14 +5,14 @@
<img class="more" src="@/assets/images/more.png" />
</template>
</Title1>
<div class="flex pt-20">
<div class="item" v-for="(item, index) in homeData?.scenicSpot" :key="index">
<div class="list flex pt-20">
<div class="item" v-for="(item, index) in scenicSpot" :key="index">
<img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" />
<img v-if="index == 1" class="item-icon" src="@/assets/images/queue.png" />
<img v-if="index == 2" class="item-icon" src="@/assets/images/congestion.png" />
<span class="item-label">{{ item.name }}</span>
<div class="item-value flex align-end rela">
<countup :end-val="item.value" /><span class="unit">个</span>
<countup :end-val="item.value || 0" /><span class="unit">个</span>
</div>
</div>
</div>
@@ -145,7 +145,7 @@
<Title2 title="景区购票数" />
<div class="ticket-wrap">
<img src="@/assets/images/ticket.png" />
<div v-for="(item, index) in homeData?.admission" :key="index">
<div v-for="(item, index) in admission" :key="index">
<span class="label">{{ item.name }}：</span><countup :end-val="item.value" />
</div>
</div>
@@ -155,7 +155,7 @@
<div class="flex">
<div class="age-box">
<Title3 title="年龄/性别占比" />
<age />
<div class="mt-8"> <age /></div>
<div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
<div
class="cell pt-20"
@@ -193,14 +193,32 @@
</template>
<script setup>
import countup from 'vue-countup-v3'
import top from './top.vue'
import age from './age.vue'
import gauge from './gauge.vue'
import ticket from './ticket.vue'
import countup from 'vue-countup-v3'
const homeData = inject('homeData')
// 景区信息
const scenicSpot = computed(() => {
if (homeData.value) return homeData.value?.scenicSpot
return [
{ value: 0, name: '全县景区数量' },
{ value: 0, name: '核心景区数' },
{ value: 0, name: '低感景区总数' }
]
})
const admission = computed(() => {
if (homeData.value) return homeData.value?.admission
return [
{ name: '当日购票量：', value: 0 },
{ name: '未来3天购票量：', value: 0 },
{ name: '3天后购票量：', value: 0 }
]
})
// 年龄占比
const ageRateTotal = computed(() => {
return homeData.value?.userPortrait.genderRate.reduce(
(total, current) => Number(current.count) + total,
@@ -208,9 +226,9 @@
)
})
const channelTotal = computed(() => {
return (
homeData.value?.userPortrait?.channel ||
[].reduce((total, current) => Number(current.count) + total, 0)
return homeData.value?.userPortrait?.channel.reduce(
(total, current) => Number(current.count) + total,
0
)
})
</script>
@@ -238,6 +256,9 @@
bottom: -30%;
z-index: 990;
}
.list {
height: vh(72);
}
.item {
position: relative;
height: vh(52);
@@ -258,8 +279,8 @@
left: vw(70);
top: vh(-10);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.7);
font-size: vw(16);
color: #ffffff;
}
&-value {
position: absolute;
@@ -299,7 +320,7 @@
justify-content: center;
}
&-title {
font-size: vw(14);
font-size: vw(18);
color: rgba(255, 255, 255, 0.9);
}
&-value {
@@ -321,8 +342,8 @@
}
}
.age-box {
width: vw(290);
height: vh(290);
width: vw(320);
height: vh(296);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
@@ -330,8 +351,8 @@
}
}
.box-1 {
width: vw(240);
height: vh(290);
width: vw(230);
height: vh(296);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(2) {
@@ -374,7 +395,7 @@
color: rgba(255, 255, 255, 0.9);
}
.progress {
width: vw(170);
width: vw(150);
margin-left: vw(4);
:deep(.el-progress-bar__outer) {
background-color: #0858ae !important;