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-02 18:32:49 +08:00
parent d67ac75031
commit ab1ab210a9
23 changed files with 744 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/views/scenic/components/age-ratio.vue
View File

@@ -1,4 +1,136 @@
<template>
<div class="age" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
const { id, setOption } = useEchart()
let params = null
onMounted(() => {
init()
})
const init = () => {
if (!params) {
const center = ['50%', '40%']
params = {
legend: {
x: 'left',
y: '76%',
itemHeight: fitChartSize(8),
itemWidth: fitChartSize(8),
itemGap: fitChartSize(14),
formatter: function (name) {
// let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
// return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
return '{name|' + name + '}'
},
textStyle: {
rich: {
name: {
color: '#fff',
fontSize: fitChartSize(14)
},
value: {
color: '#00D5F6',
fontSize: fitChartSize(14)
}
}
}
},
series: [
{
type: 'pie',
silent: true,
center: center,
radius: ['60%', '70%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
borderWidth: fitChartSize(2)
},
label: {
show: false,
color: '#D3F0FE',
fontSize: fitChartSize(12)
},
data: [
{ value: 484, name: '19岁以下' },
{ value: 300, name: '18-30岁' },
{ value: 1048, name: '30-40岁' },
{ value: 580, name: '40-60岁' },
{ value: 735, name: '60岁以上' }
]
},
{
type: 'pie',
silent: true,
center: center,
radius: ['54%', '58%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
borderWidth: fitChartSize(2)
},
label: {
show: false,
color: '#D3F0FE',
fontSize: fitChartSize(12)
},
data: [
{ value: 484, name: '19岁以下' },
{ value: 300, name: '18-30岁' },
{ value: 1048, name: '30-40岁' },
{ value: 580, name: '40-60岁' },
{ value: 735, name: '60岁以上' }
]
},
{
type: 'pie',
silent: true,
center: center,
radius: ['0', '40%'],
itemStyle: {
color: '#065EAD'
},
label: {
show: false
},
data: [100]
},
{
type: 'pie',
silent: true,
center: center,
radius: ['0', '26%'],
itemStyle: {
color: '#0477D1'
},
label: {
show: false
},
data: [100]
}
]
}
} else {
}
setOption(params)
}
</script>
<style lang="scss" scoped>
.age {
width: vw(240);
height: vh(240);
}
</style>
<!-- <template>
<div class="age-ratio" :id="id" />
</template>
@@ -90,4 +222,4 @@
width: vw(280);
height: vh(240);
}
</style>
</style> -->

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

@@ -1,9 +1,20 @@
<template>
<div class="box-1">
<div class="header">
<div>
<div class="label">今年总游客数</div>
<countup v-for="item in count" :endVal="item" />
<div class="header__left">
<img src="@/assets/images/ticket.png" />
<div class="header__left-item">
<div class="label">当日购票量：</div>
<countup :endVal="1234" />
</div>
<div class="header__left-item">
<div class="label">未来3天购票量：</div>
<countup :endVal="1234" />
</div>
<div class="header__left-item">
<div class="label">3天后购票量：</div>
<countup :endVal="1234" />
</div>
</div>
<div>
<div>
@@ -82,7 +93,7 @@
</p>
</div>
</div>
<div class="more">查看更多</div>
<img class="more" src="@/assets/images/more-col.png" alt="查看更多" />
</div>
</div>
</div>
@@ -98,7 +109,7 @@
<style scoped lang="scss">
.box-1 {
margin-top: vh(120);
width: vw(800);
width: vw(900);
height: vh(950);
padding: vw(10);
box-sizing: border-box;
@@ -107,43 +118,57 @@
.header {
display: flex;
margin-top: vh(10);
& > div:nth-child(1) {
width: vw(300) !important;
&__left {
display: flex;
align-items: center;
> img {
width: vw(74);
height: auto;
}
}
&__left-item {
position: relative;
width: vw(120);
height: vh(58);
padding-left: vw(10);
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('@/assets/images/ticket-item-bg.png');
background-size: 100% 100%;
.label {
position: absolute;
top: vh(-4);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
}
& > div:nth-child(2) {
flex: 1;
display: flex;
justify-content: space-between;
.label {
font-weight: 400;
font-size: vw(16);
color: #ffffff;
}
.value {
font-weight: bold;
font-size: vw(28);
color: #02f9fa;
text-align: center;
line-height: vh(60);
}
.error {
color: #ff4400;
}
}
.label {
font-weight: 400;
font-size: vw(16);
color: #ffffff;
}
.value {
font-weight: bold;
font-size: vw(28);
color: #02f9fa;
text-align: center;
line-height: vh(60);
}
.error {
color: #ff4400;
}
.countup-wrap {
margin-top: vh(10);
display: inline-block;
width: vw(40);
height: vh(40);
margin-right: vw(4);
border-radius: vw(4);
color: #ffffff;
color: #02f9fa;
font-size: vw(28);
font-weight: bold;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
}
}
.main {
@@ -232,18 +257,9 @@
}
.more {
cursor: pointer;
width: auto;
height: vh(100);
margin-top: vh(12);
width: vw(26);
height: vh(98);
font-weight: 400;
font-size: vw(14);
line-height: vh(10);
color: #ffffff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #034e99;
}
}
}

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

@@ -1,7 +1,7 @@
<template>
<div class="container">
<div class="flex">
<div class="box mr-10">
<div class="box mr-8">
<Title1 title="排队信息" />
<div class="count-box flex justify-between">
<count-item label="今日出票" :count="35600" suffix="张" />
@@ -16,7 +16,7 @@
<Line :width="520" :height="300" />
</div>
</div>
<div class="box mr-10">
<div class="box mr-8">
<Title1 title="景区承载" />
<div class="flex">
<progress1 :width="200" :height="70" />
@@ -32,7 +32,7 @@
<Line :width="520" :height="300" />
</div>
</div>
<div class="box-1 mr-10">
<div class="box-1 mr-8">
<Title1 title="停车信息" />
<div class="flex">
<div class="flex">
@@ -42,21 +42,21 @@
</div>
<div class="ml-20 flex flex-1 justify-between">
<count-item label="总停车场数" :count="561" suffix="个" />
<count-item label="总停车位数" :count="150000" suffix="个" />
<count-item label="总停车位数" :count="15" suffix="个" />
</div>
</div>
<div class="flex">
<div class="border flex-1">
<div class="border mr-8 flex-1">
<div class="pt-10">
<Title3 title="今日景区承载量" />
</div>
<Line :width="350" :height="300" />
<Line :width="360" :height="300" />
</div>
<div class="border flex-1">
<div class="pt-10">
<Title3 title="车辆归属地占比" />
</div>
<PieRow :width="340" :height="300" />
<PieRow :width="360" :height="300" />
</div>
</div>
</div>
@@ -75,8 +75,8 @@
</div>
</div>
</div>
<div class="flex mt-10">
<div class="box-3 mr-10">
<div class="flex mt-8">
<div class="box-3 mr-8">
<Title1 title="交通信息" />
<div class="count-box flex">
<count-item label="总通景路段" :count="35600" suffix="张" />
@@ -85,25 +85,41 @@
<count-item label="拥堵持续时间" :count="35600" suffix="S" />
</div>
<div class="flex">
<div class="border">
<div class="border mr-8">
<Title3 title="今日交通负载" />
<traffic-flow />
</div>
<div class="border">
<div class="border mr-8">
<Title3 title="今日交通负载" />
<PieCol :width="230" :height="300" />
<jam :width="220" :height="160" />
<div class="legend">
<ul class="legend__wrapper">
<li class="legend-item" v-for="(item, index) in 6" :key="index">
<p class="legend-item-label">路段1</p>
<p class="legend-item-value">10%</p>
</li>
</ul>
</div>
</div>
<div class="border">
<Title3 title="今日交通负载" />
<PieCol :width="230" :height="300" />
<jam :width="220" :height="160" />
<div class="legend">
<ul class="legend__wrapper">
<li class="legend-item" v-for="(item, index) in 6" :key="index">
<p class="legend-item-label">路段1</p>
<p class="legend-item-value">10%</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box-4 mr-10">
<div class="box-4 mr-8">
<Title1 title="用户画像" />
<div class="flex">
<div class="flex-1">
<div class="border mr-8 flex-1">
<Title3 title="年龄/性别占比" />
<age-ratio />
<div class="count">总人数：<countup endVal="124563" /></div>
@@ -136,7 +152,7 @@
</div>
</div>
</div>
<div class="border flex-1">
<div class="border mr-8 flex-1">
<Title3 title="客源地分析TOP5" />
<top />
</div>
@@ -151,14 +167,15 @@
<div class="box-5">
<Title1 title="车船信息" />
<div class="flex mb-6">
<div class="border pt-10 pb-10">
<div class="border mr-8 pt-10 pb-10">
<Title2 title="车车车车车车" />
<div class="car-box mt-10">
<div class="pr-20">
<img class="icon" src="@/assets/images/icon-6.png" />
<div class="car-item pr-20">
<div class="label">车总数</div>
<div class="value">130辆</div>
</div>
<div>
<div class="car-item">
<div class="label">今日累计运营(班次)</div>
<div class="value">130次</div>
</div>
@@ -178,11 +195,12 @@
<div class="border pt-10 pb-10">
<Title2 title="船船船船船船" />
<div class="car-box mt-10">
<div class="pr-20">
<img class="icon" src="@/assets/images/icon-6.png" />
<div class="car-item pr-20">
<div class="label">车总数</div>
<div class="value">130辆</div>
</div>
<div>
<div class="car-item">
<div class="label">今日累计运营(班次)</div>
<div class="value">130次</div>
</div>
@@ -200,7 +218,7 @@
</div>
</div>
</div>
<div class="border">
<div class="border pt-10 pb-10">
<div id="car-ship" class="car-ship" />
<img class="full" src="@/assets/images/full.png" @click="show = true" />
</div>
@@ -218,6 +236,7 @@
import BigCarShipMap from './big-car-ship-map.vue'
import AgeRatio from './age-ratio.vue'
import top from './top.vue'
import jam from './jam.vue'
import ticket from './ticket.vue'
import TrafficFlow from './traffic-flow.vue'
@@ -239,6 +258,70 @@
:deep(.anchorBL) {
display: none;
}
.legend {
display: flex;
align-items: center;
justify-content: center;
@mixin icon($column) {
width: vw(50);
height: vh(60);
display: flex;
flex-direction: $column;
align-items: center;
justify-content: center;
}
&__wrapper {
display: flex;
flex-wrap: wrap;
gap: vw(8);
width: vw(170);
}
&-item {
color: #fff;
}
&-item:nth-child(1) {
@include icon(column);
background-image: url('@/assets/images/legend-item-1.png');
background-size: 100% 100%;
}
&-item:nth-child(2) {
@include icon(column);
background-image: url('@/assets/images/legend-item-1.png');
background-size: 100% 100%;
}
&-item:nth-child(3) {
@include icon(column);
background-image: url('@/assets/images/legend-item-1.png');
background-size: 100% 100%;
}
&-item:nth-child(4) {
@include icon(column-reverse);
background-image: url('@/assets/images/legend-item-2.png');
background-size: 100% 100%;
}
&-item:nth-child(5) {
@include icon(column-reverse);
background-image: url('@/assets/images/legend-item-2.png');
background-size: 100% 100%;
}
&-item:nth-child(6) {
@include icon(column-reverse);
background-image: url('@/assets/images/legend-item-2.png');
background-size: 100% 100%;
}
&-item-label {
font-weight: 400;
font-size: vw(12);
line-height: vh(14);
}
&-item-value {
font-weight: bold;
font-size: vw(16);
line-height: vh(18);
}
}
.dialog {
:deep(.el-dialog) {
width: vw(2540);
@@ -279,51 +362,54 @@
}
.border {
position: relative;
overflow: hidden;
padding: 0 vw(10);
margin: 0 vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.box {
@extend .bg;
width: vw(570);
width: vw(510);
height: vh(475);
}
.box-1 {
@extend .bg;
width: vw(750);
height: vh(475);
}
.box-2 {
@extend .bg;
width: vw(440);
height: vh(475);
}
.box-3 {
@extend .bg;
width: vw(850);
height: vh(465);
}
.box-4 {
@extend .bg;
width: vw(840);
height: vh(465);
}
.box-5 {
@extend .bg;
width: vw(650);
height: vh(465);
}
.car-box {
width: vw(350);
width: vw(316);
height: vh(74);
padding-left: vw(75);
display: flex;
align-items: center;
background-image: url('@/assets/images/icon-6.png');
background-size: 100% 100%;
.icon {
position: absolute;
width: vw(350);
height: vw(74);
}
.car-item {
display: flex;
flex-direction: column;
align-items: center;
&:nth-child(2) {
padding-left: vw(80);
}
}
.label {
font-weight: 400;
font-size: vw(14);
@@ -333,12 +419,12 @@
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
margin-top: vh(10);
margin-top: vh(6);
}
}
.car-ship {
width: vw(630);
height: vh(230);
width: vw(660);
height: vh(240);
}
.full {
cursor: pointer;

144
src/views/scenic/components/jam.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
}"
/>
</template>
<script setup>
import styleUtil from '@/utils/styleUtil'
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
const props = defineProps({
width: {
type: Number,
default: () => 0
},
height: {
type: Number,
default: () => 0
},
config: {
type: Object,
default: () => {
return {}
}
}
})
const { id, setOption } = useEchart()
var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
var title = ['企业', '农业', '工业', '纺织']
var dataValue = ['15', '30', '35', '20']
var dataList = title.map((item, index) => {
return {
name: item,
value: dataValue[index]
}
})
var defaultCofig = {
color: colorList,
series: [
{
type: 'pie',
startAngle: 360,
center: ['50%', '40%'],
radius: ['65%', '80%'],
label: {
show: false
},
labelLine: {
show: false
},
data: [
{
value: 50,
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 150, 255, 0)'
},
{
offset: 0.5,
color: 'rgba(0, 150, 255, 0.47)'
},
{
offset: 1,
color: 'rgba(0, 150, 255, 0)'
}
]
}
}
},
{
name: 'bottom',
value: 50,
itemStyle: {
color: 'transparent'
}
}
]
},
{
type: 'pie',
center: ['50%', '40%'],
radius: ['55%', '70%'],
itemStyle: {
borderWidth: fitChartSize(4),
borderColor: '#093672'
},
label: {
show: true,
position: 'center',
fontWeight: 'bold',
formatter: function (o) {
return `{value|123456}` + '\n' + `{name|整改率}`
},
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(24),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#7894A8',
fontSize: fitChartSize(12)
}
}
},
labelLine: {
show: false
},
data: dataList
}
]
}
const init = () => {
setOption({
...defaultCofig,
...props.config
})
}
onMounted(() => {
init()
})
</script>
<style scoped lang="scss"></style>

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

@@ -189,7 +189,7 @@
<style scoped lang="scss">
.ticket {
width: 100%;
width: vw(250);
height: vh(300);
}
</style>

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

@@ -181,7 +181,7 @@
<style scoped lang="scss">
.top {
width: 100%;
width: vw(240);
height: vh(360);
}
</style>

2
src/views/scenic/components/traffic-flow.vue
View File

@@ -96,7 +96,7 @@
<style scoped lang="scss">
.traffic-flow {
width: vw(278);
width: vw(260);
height: vh(300);
}
</style>