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-16 18:28:02 +08:00
parent 111133ffb4
commit 5e5ce522db
4 changed files with 317 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,4 @@
<template> <template>
<<<<<<< HEAD
<div class="box-3"> <div class="box-3">
<div class="header"> <div class="header">
<div class="flex"> <div class="flex">
@@ -244,132 +243,3 @@
} }
} }
</style> </style>
=======
<!-- 内容 -->
<div class="box-3-content">
<!-- header -->
<div class="header">
<div class="li-1">
今年总游客数
<div class="li-num">
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
</div>
</div>
<div class="li-1">
全县区总游客人数
<div class="li-num">
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
</div>
</div>
<div class="li-1">
全在园人数
<div class="li-num">
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
</div>
</div>
<div class="li-1 li-2">
景区安全度 <span class="color1">安全</span>
</div>
<div class="li-1 li-2">
景区游玩舒适度 <span class="color1">舒适</span>
</div>
<div class="li-1 li-2">
景区接待情况 <span class="color2">排队</span>
</div>
<div class="li-1 li-2">
交通拥挤度 <span class="color1">舒适</span>
</div>
<div class="li-1 li-2">
停车场负荷度 <span class="color1">超负荷</span>
</div>
</div>
<!-- section -->
<div class="section">
</div>
<!-- footer -->
<div class="footer">
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.box-3-content{
// margin-top:200px;
.header{
margin:0 auto;
width:vw(1618);
height:vh(128);
background-image: url('/src/assets/images/header-top-bg.png');
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
.li-2{
text-align: center;
span{
display: block;
font-size:vw(28);
font-weight: bold;
margin-top:vw(10);
text-align: center;
}
.color1{
color:#02F9FA;
}
.color2{
color:#FF4400;
}
.color3{
color:#E21B1B;
}
}
.li-1{
font-weight: 400;
font-size: vw(16);
color: rgba(255,255,255,0.9);
text-align: left;
font-style: normal;
text-transform: none;
margin-right:vw(10);
.li-num{
margin-top:vh(10);
span{
display: inline-block;
margin:vw(2);
width: vw(40);
height: vh(40);
line-height: vh(40);
text-align: center;
font-weight: bold;
font-size:vw(28);
background: linear-gradient( 180deg, #00B7FF 0%, #0033FF 100%);
border-radius: vw(4);
border: 1px solid;
border-image: linear-gradient(180deg, rgba(55, 216, 252, 0), rgba(131, 226, 255, 1)) 1 1;
}
}
}
}
}
</style>
>>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705

140
src/views/home/components/box-4.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="box-4"> <div class="box-4">
<!-- <Title1 title="交通信息" /> <Title1 title="交通信息" />
<div class="flex justify-evenly pt-10"> <div class="flex justify-evenly pt-10">
<div v-for="item in list" class="cell"> <div v-for="item in list" class="cell">
<img class="icon" :src="item.icon" alt="" width="64" height="64" /> <img class="icon" :src="item.icon" alt="" width="64" height="64" />
@@ -97,7 +97,7 @@
<div class="flex-1"> <div class="flex-1">
<Title1 title="酒店信息" class="title1" /> <Title1 title="酒店信息" class="title1" />
</div> </div>
</div> --> </div>
<div class="flex"> <div class="flex">
<div class="car-ship"> <div class="car-ship">
<div class="mb-6"> <div class="mb-6">
@@ -114,9 +114,19 @@
<div>空余</div> <div>空余</div>
</div> </div>
<div class="cell"> <div class="cell">
<div class="label">车牌号</div> <div>白帝城</div>
<div>车长</div> <div>5<span class="unit-1">辆</span></div>
<div>车速</div> <div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div> </div>
</div> </div>
</div> </div>
@@ -126,12 +136,56 @@
<div class="flex align-center"> <div class="flex align-center">
<countup class="value" :end-val="130" /> <span class="unit">辆</span> <countup class="value" :end-val="130" /> <span class="unit">辆</span>
</div> </div>
<div class="table">
<div class="header">
<div>景区</div>
<div>调度</div>
<div>空余</div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
<div class="cell">
<div>白帝城</div>
<div>5<span class="unit-1">辆</span></div>
<div>1<span class="unit-1">辆</span></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="hotel"> <div class="hotel">
<div> 3 </div> <div>
<div> 4 </div> <div class="item">
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
</div>
<div class="item">
<div class="label">房间总数</div>
<countup class="value" :end-val="500" />
</div>
<div class="item">
<div class="label">总入住</div>
<countup class="value" :end-val="500" />
</div>
<div class="item">
<div class="label">总入住率</div>
<countup class="value" :end-val="500" />
</div>
</div>
<div>
<div class="pt-6">
<Title3 title="酒店入住人数及入住率" />
</div>
<lodging-ratio />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -139,8 +193,10 @@
<script setup> <script setup>
import jam from './jam.vue' import jam from './jam.vue'
import TrafficFlow from './traffic-flow.vue'
import vacancy from './vacancy.vue' import vacancy from './vacancy.vue'
import TrafficFlow from './traffic-flow.vue'
import LodgingRatio from './lodging-ratio.vue'
import countup from 'vue-countup-v3' import countup from 'vue-countup-v3'
import icon1 from '@/assets/images/icon-1.png' import icon1 from '@/assets/images/icon-1.png'
import icon2 from '@/assets/images/icon-2.png' import icon2 from '@/assets/images/icon-2.png'
@@ -227,10 +283,10 @@
} }
& > div { & > div {
flex: 1; flex: 1;
height: vh(70);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
height: vh(70);
background-image: url('@/assets/images/bg-4.png'); background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%; background-size: 100% 100%;
.label { .label {
@@ -263,10 +319,12 @@
background-image: url('@/assets/images/bg-4.png'); background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%; background-size: 100% 100%;
.icon { .icon {
padding-left: vw(90);
width: vw(352); width: vw(352);
height: vh(70); height: vh(70);
padding-top: vh(10); display: flex;
padding-left: vw(90); flex-direction: column;
justify-content: center;
background-size: 100% 100%; background-size: 100% 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -298,7 +356,7 @@
.table { .table {
position: absolute; position: absolute;
left: vw(160); left: vw(160);
width: vw(200); width: vw(220);
height: vh(100); height: vh(100);
z-index: 2; z-index: 2;
.header { .header {
@@ -316,19 +374,73 @@
} }
.cell { .cell {
display: flex; display: flex;
height: vh(30); height: vh(27);
line-height: vh(30); line-height: vh(27);
text-align: center; text-align: center;
background: #074686; background: #074686;
&:nth-child(2n + 1) {
background: rgba(0, 150, 255, 0.1);
}
& > div { & > div {
flex: 1; flex: 1;
} }
& > div:nth-child(1) {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
& > div:nth-child(2) {
font-weight: bold;
font-size: vw(18);
color: #ffffff;
}
& > div:nth-child(3) {
font-weight: bold;
font-size: vw(18);
color: #02f9fa;
}
.unit-1 {
font-size: vw(12);
}
} }
} }
} }
} }
.hotel { .hotel {
flex: 1; flex: 1;
margin-left: vw(6);
& > div:nth-child(1) {
display: flex;
width: vw(360);
height: vh(70);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.label {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #ffffff;
}
}
}
& > div:nth-child(2) {
margin-top: vh(10);
width: vw(360);
height: vh(140);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
}
} }
} }
</style> </style>

188
src/views/home/components/lodging-ratio.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<div class="lodging-ratio" id="lodging-ratio" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import * as echarts from 'echarts'
let topChart = null
let result = [
{ name: '酒店1', value: 86 },
{ name: '酒店2', value: 83 },
{ name: '酒店3', value: 73 }
]
let option = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
left: '4%',
right: '4%',
top: '16%',
bottom: '-10%',
containLabel: true
},
xAxis: [
{
splitLine: {
show: false
},
type: 'value',
show: false
}
],
yAxis: [
{
splitLine: {
show: false
},
axisLine: {
show: false
},
type: 'category',
axisTick: {
show: false
},
data: result.map((item) => item.name),
axisLabel: {
show: false
}
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
},
verticalAlign: 'bottom',
padding: [0, 0, 6, 0],
inside: true,
formatter: function (value) {
return `{value|${value}}`
},
rich: {
name: {
align: 'center',
color: '#D3E5FF',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
},
value: {
align: 'center',
color: '#fff',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
}
}
},
data: result.map((item) => item.value)
}
],
series: [
{
name: '',
type: 'bar',
barWidth: fitChartSize(4),
MaxSize: 0,
showBackground: true,
barBorderRadius: [30, 0, 0, 30],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
label: {
show: true,
offset: [10, -13],
color: '#D3E5FF',
fontWeight: 500,
position: 'left',
align: 'left',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN',
formatter: function (params) {
return params.data.name
}
},
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
barBorderRadius: [3, 0, 0, 3],
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255, 112, 33, 0)'
},
{
offset: 1,
color: 'rgba(255, 112, 33, 1)'
}
]
}
}
}
})
},
{
name: '外圆',
type: 'scatter',
emphasis: {
scale: false
},
showSymbol: true,
symbol: 'circle',
symbolSize: fitChartSize(10),
z: 2,
data: result.map((item, index) => {
return {
name: item.name,
value: item.value,
itemStyle: {
color: '#fff',
opacity: 1
}
}
}),
animationDelay: 500
}
]
}
const init = () => {
topChart = echarts.init(document.getElementById('lodging-ratio'))
topChart.setOption(option)
}
const resize = () => {
if (topChart) {
topChart.dispose()
topChart = null
init()
}
}
onMounted(() => {
init()
window.addEventListener('resize', resize)
})
</script>
<style scoped lang="scss">
.lodging-ratio {
width: 100%;
height: vh(110);
}
</style>

6
src/views/home/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<main class="wrapper"> <main class="wrapper">
<!-- <box1 /> --> <box1 />
<div class="header"> <div class="header">
<ul class="nav-left"> <ul class="nav-left">
<li class="nav-left-item">安全</li> <li class="nav-left-item">安全</li>
@@ -15,8 +15,8 @@
<li class="nav-right-item">酒店</li> <li class="nav-right-item">酒店</li>
</ul> </ul>
</div> </div>
<!-- <box2 /> <box2 />
<box3 /> --> <box3 />
<box4 /> <box4 />
</main> </main>
</template> </template>