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

style:首页

Browse Source
This commit is contained in:
zjc
2024-12-16 17:38:50 +08:00
parent cc9782e007
commit 0c148685d2
39 changed files with 2838 additions and 1282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,329 +1,334 @@
<template>
<div class="box-4-content">
<div class="content-1 content">
<!-- 1 -->
<div class="title">
游客画像
</div>
<!-- 2 -->
<div class="all-man">
</div>
<ul class="ul-1">
<li class="li ">
<div class="li-title">
<span>年龄性别占比</span>
</div>
<div class="chart-1">
<v-chart class="chart" :option="option1" autoresize />
<span class="sky-1"></span>
</div>
<div class="li-man">总人数：123456</div>
</li>
<li class="li">
<div class="li-title">
<span>客源分析TOP5</span>
</div>
<div class="press-box" v-for="item in 5" :key="i">
<div class="press-title">
<span>河北</span>
<span>55%</span>
</div>
<div class="bg-box">
<div class="bg-width"></div>
</div>
</div>
</li>
<li class="li">
<div class="li-title">
<span>购票来源</span>
</div>
<div class="round-press">
<div class="round-1">
<div class="round-width"></div>
</div>
</div>
<v-chart class="chart" :option="option2" autoresize />
</li>
</ul>
</div>
<div class="content-2 content">
<!-- 1 -->
<div class="title">
停车信息
</div>
<ul class="ul-1">
<li class="li">
<div class="li-title">
<span>年龄性别占比</span>
</div>
<v-chart class="chart" :option="option1" autoresize />
<div class="li-man">总人数：123456</div>
</li>
<li class="li">
<div class="li-title">
<span>客源分析TOP5</span>
</div>
<div class="press-box" v-for="item in 5" :key="i">
<div class="press-title">
<span>河北</span>
<span>55%</span>
</div>
<div class="bg-box">
<div class="bg-width"></div>
</div>
</div>
</li>
<li class="li">
<div class="li-title">
<span>购票来源</span>
</div>
<div class="round-press">
<div class="round-1">
<div class="round-width"></div>
</div>
</div>
<v-chart class="chart" :option="option2" autoresize />
</li>
</ul>
</div>
</div>
<div class="box-4">
<!-- <Title1 title="交通信息" />
<div class="flex justify-evenly pt-10">
<div v-for="item in list" class="cell">
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
<div>
<countup :end-val="item.value" />
<div class="label">{{ item.label }}</div>
</div>
</div>
</div>
<div class="flex">
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<div class="pt-20">
<Line :width="250" :height="170" />
</div>
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<Line :width="250" :height="120" />
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<jam :width="250" :height="200" />
</div>
</div>
</div>
<Title1 title="停车信息" />
<div class="stop-box">
<div>
<img class="icon" src="@/assets/images/icon-5.png" alt="" />
<div>
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
</div>
<div>
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
</div>
<div>
<div class="label">已使用车位数</div>
<countup class="value" :end-val="500" />
</div>
</div>
<div>
<div>
<div class="label">三峡之巅</div>
<div class="value error">已满</div>
</div>
<div>
<div class="label">白帝城</div>
<div class="value error">已满</div>
</div>
<div>
<div class="label">天坑地缝</div>
<div class="value success">空余</div>
</div>
<div>
<div class="label">永安宫</div>
<div class="value success">空余</div>
</div>
</div>
</div>
<div class="flex pt-10">
<div class="box-1">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<div class="pt-20">
<Line :width="250" :height="120" />
</div>
</div>
</div>
<div class="box-1">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<traffic-flow />
</div>
</div>
<div class="box-1">
<div class="pt-10">
<Title3 title="景区停车场空位" />
<vacancy />
</div>
</div>
</div>
<div class="flex">
<div class="flex-1">
<Title1 title="车船信息" class="title1" />
</div>
<div class="flex-1">
<Title1 title="酒店信息" class="title1" />
</div>
</div> -->
<div class="flex">
<div class="car-ship">
<div class="mb-6">
<div class="car">
<div class="label">车总数</div>
<div class="flex align-center">
<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 class="label">车牌号</div>
<div>车长</div>
<div>车速</div>
</div>
</div>
</div>
<div>
<div class="ship">
<div class="label">车总数</div>
<div class="flex align-center">
<countup class="value" :end-val="130" /> <span class="unit">辆</span>
</div>
</div>
</div>
</div>
<div class="hotel">
<div> 3 </div>
<div> 4 </div>
</div>
</div>
</div>
</template>
<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { PieChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
use([
GaugeChart,
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
provide(THEME_KEY, 'dark');
const option1 = ref({
backgroundColor:'transparent',
series: [
{
name: 'Access From',
width:300,
height:100,
type: 'pie',
left:-50,
top:10,
radius: ['40%', '50%'],
avoidLabelOverlap: true,
padAngle: 5,
itemStyle: {
borderRadius: 2
},
data: [
{ value: 200, name: '30-40%' },
{ value: 500, name: '19岁以下' },
{ value: 234, name: '18-30岁' },
{ value: 135, name: '60岁以上' },
{ value: 100, name: '30-40岁' },
],
labelLine: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
});
const option2 = ref({
backgroundColor:'transparent',
});
import jam from './jam.vue'
import TrafficFlow from './traffic-flow.vue'
import vacancy from './vacancy.vue'
import countup from 'vue-countup-v3'
import icon1 from '@/assets/images/icon-1.png'
import icon2 from '@/assets/images/icon-2.png'
import icon3 from '@/assets/images/icon-3.png'
import icon4 from '@/assets/images/icon-4.png'
let list = ref([
{
label: '路段总数',
value: '1234',
icon: icon1
},
{
label: '当前拥堵路段',
value: '1234',
icon: icon2
},
{
label: '总拥堵次数',
value: '1234',
icon: icon3
},
{
label: '最大拥堵时长',
value: '1234',
icon: icon4
}
])
</script>
<style lang="scss" scoped>
.box-4-content{
width:vw(792);
height:vh(976);
background: linear-gradient( 180deg, rgba(10,37,75,0) 0%, rgba(10,37,75,0.87) 30%, #0A254B 50%, #0A254B 100%);
// background: green;
border-radius: 0px 0px 0px 0px;
.content-2{
.all-2-infor{
.box-1{
display: flex;
width:vw(384);
height: vh(70);
background: linear-gradient( 90deg, #0A4190 0%, #0096FF 47%, #004D88 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
.info1{
text-align: center;
}
.t-ico-1{
justify-content: center;
align-items: center;
.t-ico-1{
width:vw(45);
height:vh(47);
}
}
}
}
}
.content{
.title{
width: vw(220);
height: vh(32);
line-height: vh(32);
background: linear-gradient( 180deg, #02A8F7 0%, #05AEFF 49%, #0184E1 51%, #0572C1 77%, #0085E2 100%);
font-size:vw(16);
text-align: center;
margin: vh(20) auto;
}
.ul-1{
display:flex;
.chart-1{
width:vw(253);
height:vh(150);
position: relative;
.sky-1{
position: absolute;
top:vw(60);
left:50%;
width:vw(30);
height:vw(30);
transform: translate(-50%);
background-color: #00B1FF;
border-radius: 50%;
}
}
.li{
width:vw(253);
height:vh(225);
margin-right:vw(10);
background: radial-gradient( 0% 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
.li-man{
font-size:vw(14);
color:#fff;
margin:0 auto;
text-align: center;
}
.round-press{
}
.press-box{
padding:vw(5) vw(10);
// margin-bottom:vh(10);
.press-title{
display: flex;
justify-content: space-between;
color:rgba(255,255,255,0.9);
font-size:vw(12);
margin-bottom:vh(10)
}
.bg-box{
width: 100%;
height: vw(10);
background: rgba(0,150,255,0.15);
border-radius: vw(5);
}
.bg-width{
background: linear-gradient( to left, #FF7021 0%, rgba(255,112,33,0) 100%);
border-radius: vw(5);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width:50%;
height:100%;
position: relative;
}
.bg-width::before{
display: block;
content: '';
width:vw(10);
height:vw(10);
// border-radius: 50%;
position: absolute;
right:0;
top:0;
width: 0;
height: 0;
border-left: vw(10) solid red;
// border-right-width: vw(10);
// border-bottom-width: vw(10);
// border-left-width: vw(10);
}
}
.li-title{
background: url(/src/assets/images/t-title-bg.png) no-repeat 100%;
span{
background: linear-gradient(90deg, #FFFFFF 0%, #0096FF 100%);
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: vw(15);
line-height: vh(18);
text-align: left;
font-style: normal;
text-transform: none;
display: inline-block;
margin-left:vw(20);
margin-bottom:vh(10);
}
.li-1-echat{
position: relative;
.sty-1{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:50rpx;
height:50rpx;
}
// width: 100%;
// height: 300px;
.chart {
}
}
}
}
}
}
.chart {
width: vw(253);
height: vh(120);
}
}
.title1 {
:deep(.title) {
width: vw(300) !important;
}
}
.box-4 {
margin-top: vh(120);
width: vw(790);
height: vh(950);
padding: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-5.png');
background-size: 100% 100%;
.cell {
display: flex;
align-items: center;
.icon {
width: vw(64);
height: vh(60);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(24);
font-weight: bold;
}
.label {
font-weight: 400;
font-size: vw(14);
margin-top: vh(10);
color: rgba(255, 255, 255, 0.9);
}
}
.box {
width: vw(250);
height: vh(200);
margin-right: vw(8);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.box-1 {
width: vw(250);
height: vh(200);
margin-right: vw(8);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.stop-box {
display: flex;
gap: vw(20);
.icon {
width: vw(45);
height: vh(48);
}
& > div {
flex: 1;
display: flex;
align-items: center;
justify-content: space-evenly;
height: vh(70);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.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;
}
.error {
color: #e21b1b;
}
.success {
color: #02f9fa;
}
}
}
.car-ship {
flex: 1;
& > div {
position: relative;
flex: 1;
height: vh(110);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.icon {
width: vw(352);
height: vh(70);
padding-top: vh(10);
padding-left: vw(90);
background-size: 100% 100%;
box-sizing: border-box;
}
.car {
@extend .icon;
background-image: url('@/assets/images/icon-6.png');
}
.ship {
@extend .icon;
background-image: url('@/assets/images/icon-7.png');
}
.label {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
margin-bottom: vh(6);
}
.value {
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
}
.unit {
font-weight: bold;
font-size: vw(14);
color: #02f9fa;
margin-top: vh(6);
}
.table {
position: absolute;
left: vw(160);
width: vw(200);
height: vh(100);
z-index: 2;
.header {
display: flex;
height: vh(18);
line-height: vh(18);
text-align: center;
background: rgba(0, 150, 255, 0.4);
& > div {
flex: 1;
font-weight: 400;
font-size: vw(12);
color: #52b8ff;
}
}
.cell {
display: flex;
height: vh(30);
line-height: vh(30);
text-align: center;
background: #074686;
& > div {
flex: 1;
}
}
}
}
}
.hotel {
flex: 1;
}
}
</style>