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-20 16:22:44 +08:00
parent 65244492b4
commit f27f34bcfb
15 changed files with 160 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/scenic/components/box-1.vue
View File

@@ -35,7 +35,9 @@
</div>
</div>
</div>
<div class="main"> </div>
<div class="main">
<img v-if="scenicSpotId == 'root000000'" src="@/assets/images/bdc.png" alt="" />
</div>
<div class="footer">
<div class="flex">
<div class="item">
@@ -119,6 +121,13 @@
const router = useRouter()
const scenicStore = useScenicStore()
let props = defineProps({
scenicSpotId: {
type: String,
default: () => ''
}
})
const handleMore = () => {
router.push('/workOrder')
}
@@ -192,6 +201,10 @@
.main {
width: 100%;
height: vh(600);
> img {
width: 100%;
height: 100%;
}
}
.footer {
.item {

18
src/views/scenic/components/box-2.vue
View File

@@ -213,16 +213,23 @@
</div>
<div class="border mr-8 flex-1">
<Title3 title="客源地分析TOP5" />
<top />
<RegionTop
:list="scenicStore.userPortraitData.data.provinceRate"
:width="250"
:height="366"
/>
</div>
<div class="border flex-1">
<Title3 title="购票来源" />
<div class="count">总人数：<countup :end-val="channelTotal" /></div>
<ticket />
<TicketSource
:list="scenicStore.userPortraitData.data.channel"
:width="240"
:height="330"
/>
</div>
</div>
</div>
<div class="box-5">
<Title1 title="车船信息" />
<div class="flex mb-6">
@@ -304,12 +311,11 @@
import shipIcon from '@/assets/images/ship.png'
import age from './age'
import top from './top'
import jam from './jam'
import ticket from './ticket'
import TrafficFlow from './traffic-flow'
import BigCarShipMap from './big-car-ship-map'
import countup from 'vue-countup-v3'
import { useMap } from '@/hooks/map'
import { useScenicStore } from '@/stores/scenic'
@@ -522,6 +528,7 @@
height: vw(74);
}
.car-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
@@ -544,6 +551,7 @@
.suffix {
font-size: vw(12);
color: #02f9fa;
margin-bottom: vw(4);
}
}
.sum {

106
src/views/scenic/components/ticket.vue
View File

@@ -1,106 +0,0 @@
<!-- 购票来源 -->
<template>
<div class="ticket" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
import { useScenicStore } from '@/stores/scenic'
const scenicStore = useScenicStore()
const { id, setOption } = useEchart()
let x = 30
let y = 40
let params = null
watch(
() => scenicStore.userPortraitData.data.channel,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{
immediate: true
}
)
const setSeries = () => {
return scenicStore.userPortraitData.data.channel.map((item, index) => {
return {
name: item.name,
type: 'pie',
clockwise: false,
silent: true,
radius: [`${x * (index + 1)}%`, `${y + index * 30}%`],
center: ['50%', '40%'],
label: { show: false },
labelLine: { show: false },
emphasis: { show: false },
data: [
{
value: parseFloat(item.value),
name: item.name
},
{
value: 100,
itemStyle: {
color: '#07439C'
}
}
]
}
})
}
const init = () => {
if (!params) {
params = {
backgroundColor: 'transparent',
legend: {
show: true,
x: 'center',
y: '70%',
itemHeight: fitChartSize(12),
itemWidth: fitChartSize(12),
itemGap: fitChartSize(6),
formatter: function (name) {
let obj = scenicStore.userPortraitData.data.channel.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
},
textStyle: {
rich: {
name: {
color: '#fff',
fontSize: fitChartSize(12)
},
value: {
color: '#00D5F6',
fontWeight: 600,
fontSize: fitChartSize(12)
}
}
}
},
color: ['#F15A25', '#01FEFE', '#12B5FD'],
series: setSeries()
}
} else {
params.series = setSeries()
}
setOption(params)
}
</script>
<style scoped lang="scss">
.ticket {
width: vw(240);
height: vh(336);
}
</style>

132
src/views/scenic/components/top.vue
View File

@@ -1,132 +0,0 @@
<!-- 客源地分析TOP5 -->
<template>
<div class="top" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
import { useScenicStore } from '@/stores/scenic'
const scenicStore = useScenicStore()
const { id, setOption } = useEchart()
let params = null
const init = () => {
if (!params) {
params = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
left: '4%',
right: '4%',
top: '4%',
bottom: '-4%',
containLabel: false
},
xAxis: [{ max: 100, show: false }],
yAxis: [
{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
{
type: 'category',
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
color: '#fff',
fontSize: fitChartSize(18),
verticalAlign: 'bottom',
padding: [0, -fitChartSize(10), fitChartSize(10), 0],
inside: true,
formatter: function (value) {
return `{value|${value}}%`
},
rich: {
value: {
align: 'center',
color: '#fff',
fontSize: fitChartSize(14)
}
}
},
data: scenicStore.userPortraitData.data.provinceRate.map((item) => Number(item.value))
}
],
series: [
{
type: 'bar',
barWidth: fitChartSize(12),
showBackground: true,
borderRadius: [0, 0, 0, 0],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
label: {
show: true,
offset: [fitChartSize(12), -fitChartSize(20)],
color: '#D3E5FF',
fontWeight: 500,
position: 'left',
align: 'left',
fontSize: fitChartSize(14),
formatter: function (params) {
return params.data.name ?? '其他'
}
},
data: scenicStore.userPortraitData.data.provinceRate.map((item) => {
return {
name: item.name,
value: Number(item.value),
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
}
}
})
}
]
}
}
setOption(params)
}
watch(
() => scenicStore.userPortraitData.data.provinceRate,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{
immediate: true
}
)
</script>
<style scoped lang="scss">
.top {
width: vw(250);
height: vh(366);
}
</style>