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-26 18:30:52 +08:00
parent 809c950301
commit dc1ad009c7
16 changed files with 1085 additions and 1246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,17 +6,15 @@
</template>
</Title1>
<div class="flex pt-20">
<div class="item core">
<span class="label">全县景区数</span>
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
</div>
<div class="item queue">
<span class="label">核心景区数</span>
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
</div>
<div class="item congestion">
<span class="label">低感景区总数</span>
<div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
<div
v-for="(item, index) in homeData?.scenicSpot"
class="item"
:class="{ core: index == 0, queue: index == 1, congestion: index == 2 }"
>
<span class="label">{{ item.name }}</span>
<div class="flex align-end">
<countup :end-val="item.value" /><span class="unit">个</span>
</div>
</div>
</div>
<div class="flex pt-20">
@@ -68,7 +66,24 @@
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="xAxisData"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
@@ -138,39 +153,25 @@
</div>
<Title1 title="游客画像" />
<div class="flex">
<div class="box-1">
<Title3 title="年龄/性别占比" />
<age-ratio />
<age />
<div class="count">总人数：<countup endVal="124563" /></div>
<div class="cell pt-20">
<div class="cell pt-20" v-for="item in homeData?.userPortrait.genderRate">
<img class="icon" src="@/assets/images/man.png" />
<div class="bg">
<span class="text">男性</span>
<span class="text">{{ item.name }}性</span>
<div class="progress">
<el-progress
:percentage="genderRate['男']"
:percentage="Number(item.value)"
:show-text="false"
color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
:color="`linear-gradient( to right, ${
item.name == '男' ? '#074D90' : '#0A4482'
} 0%, ${item.name == '男' ? '#55E0FF' : '#FF7021'} 100%)`"
/>
</div>
<span class="man">{{ genderRate['男'] }}%</span>
</div>
</div>
<div class="cell pt-20">
<img class="icon" src="@/assets/images/woman.png" />
<div class="bg">
<span class="text">女性</span>
<div class="progress">
<el-progress
:percentage="genderRate['女']"
:show-text="false"
color="linear-gradient( to right,
#0A4482 0%, #FF7021 100%)"
/>
</div>
<span class="woman">{{ genderRate['女'] }}%</span>
<span class="man">{{ item.value }}%</span>
</div>
</div>
</div>
@@ -190,40 +191,11 @@
<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 ageRatio from './age-ratio.vue'
let props = defineProps({
data: {
type: Object,
default: () => ({})
}
})
let genderRate = computed(() => {
if (props.data?.userPortrait) return props.data?.userPortrait.genderRate
return {
男: 0,
女: 0
}
})
let xAxisData = ref([
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
])
const homeData = inject('homeData')
</script>
<style lang="scss" scoped>