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

75
src/views/home/components/age.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="age-ratio" :id="id" />
<div class="age" :id="id" />
</template>
<script setup>
@@ -10,22 +10,27 @@
const homeData = inject('homeData')
let params = null
watch(
() => homeData.value?.userPortrait?.ageRate,
() => {
setOption({
// tooltip: {
// trigger: 'item'
// },
init()
}
)
const init = () => {
if (!params) {
params = {
legend: {
orient: 'vertical',
left: '60%',
left: '54%',
y: 'center',
itemHeight: fitChartSize(8),
itemWidth: fitChartSize(8),
itemGap: fitChartSize(10),
formatter: function (name) {
return '{name|' + name + '}'
let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
},
textStyle: {
rich: {
@@ -43,8 +48,9 @@
series: [
{
type: 'pie',
silent: true,
center: ['30%', '50%'],
radius: ['50%', '70%'],
radius: ['60%', '70%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
@@ -56,16 +62,61 @@
fontSize: fitChartSize(12)
},
data: homeData.value?.userPortrait?.ageRate || []
},
{
type: 'pie',
silent: true,
center: ['30%', '50%'],
radius: ['54%', '58%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
borderWidth: fitChartSize(2)
},
label: {
show: false,
color: '#D3F0FE',
fontSize: fitChartSize(12)
},
data: homeData.value?.userPortrait?.ageRate || []
},
{
type: 'pie',
silent: true,
center: ['30%', '50%'],
radius: ['0', '40%'],
itemStyle: {
color: '#065EAD'
},
label: {
show: false
},
data: [100]
},
{
type: 'pie',
silent: true,
center: ['30%', '50%'],
radius: ['0', '26%'],
itemStyle: {
color: '#0477D1'
},
label: {
show: false
},
data: [100]
}
]
})
}
} else {
}
)
setOption(params)
}
</script>
<style lang="scss" scoped>
.age-ratio {
width: vw(253);
.age {
width: vw(290);
height: vh(120);
}
</style>

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

@@ -6,9 +6,10 @@
</template>
</Title1>
<div class="flex pt-20">
<!-- :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }" -->
<div class="item" v-for="(item, index) in homeData?.scenicSpot" :key="index">
<img class="item-icon" src="@/assets/images/core.png" alt="" />
<img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" />
<img v-if="index == 1" class="item-icon" src="@/assets/images/queue.png" />
<img v-if="index == 2" class="item-icon" src="@/assets/images/congestion.png" />
<span class="item-label">{{ item.name }}</span>
<div class="item-value flex align-end rela">
<countup :end-val="item.value" /><span class="unit">个</span>
@@ -89,19 +90,19 @@
<Title2 title="景区承载量" />
<div class="statistic">
<div class="statistic-item">
<gauge id="gauge1" />
<gauge :value="80" />
<span class="statistic-title">三峡之巅</span>
</div>
<div class="statistic-item">
<gauge id="gauge2" />
<gauge :value="50" />
<span class="statistic-title">三峡之巅</span>
</div>
<div class="statistic-item">
<gauge id="gauge3" />
<gauge :value="50" />
<span class="statistic-title">三峡之巅</span>
</div>
<div class="statistic-item">
<gauge id="gauge4" />
<gauge :value="50" />
<span class="statistic-title">三峡之巅</span>
</div>
</div>
@@ -152,7 +153,7 @@
<Title1 title="游客画像" />
<div class="flex">
<div class="box-1">
<div class="age-box">
<Title3 title="年龄/性别占比" />
<age />
<div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
@@ -161,7 +162,8 @@
v-for="(item, index) in homeData?.userPortrait.genderRate"
:key="index"
>
<img class="icon" src="@/assets/images/man.png" />
<img v-if="item.name == '男'" class="icon" src="@/assets/images/man.png" />
<img v-if="item.name == '女'" class="icon" src="@/assets/images/woman.png" />
<div class="bg">
<span class="text">{{ item.name }}性</span>
<div class="progress">
@@ -183,7 +185,7 @@
</div>
<div class="box-1">
<Title3 title="购票来源" />
<div class="count">总人数：<countup :end-val="channelTotal" /></div>
<div class="count">游客总数：<countup :end-val="channelTotal" /></div>
<ticket />
</div>
</div>
@@ -253,7 +255,7 @@
}
&-label {
position: absolute;
left: vw(80);
left: vw(70);
top: vh(-10);
font-weight: 400;
font-size: vw(14);
@@ -261,7 +263,7 @@
}
&-value {
position: absolute;
left: vw(80);
left: vw(70);
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
@@ -274,15 +276,6 @@
font-size: vw(14);
margin-bottom: vh(4);
}
.core {
background-image: url('@/assets/images/core.png');
}
.queue {
background-image: url('@/assets/images/queue.png');
}
.congestion {
background-image: url('@/assets/images/congestion.png');
}
.box {
width: vw(384);
height: vh(320);
@@ -327,16 +320,22 @@
}
}
}
.box-1 {
width: vw(253);
.age-box {
width: vw(290);
height: vh(290);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
margin-right: vw(8);
}
}
.box-1 {
width: vw(240);
height: vh(290);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(2) {
margin-right: vw(10);
margin-right: vw(8);
}
}
.count {
@@ -375,8 +374,11 @@
color: rgba(255, 255, 255, 0.9);
}
.progress {
width: vw(120);
width: vw(170);
margin-left: vw(4);
:deep(.el-progress-bar__outer) {
background-color: #0858ae !important;
}
}
.man {
font-weight: bold;

37
src/views/home/components/box-2.vue
View File

@@ -94,21 +94,21 @@
</div>
<div class="right">
<div class="item">
<span class="tag tag--success">普通</span>
<span class="item-tag--warning">重要</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="item">
<span class="tag tag--error">普通</span>
<span class="item-tag--error">紧急</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="item">
<span class="tag tag--primary">普通</span>
<span class="item-tag--primary">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
@@ -272,6 +272,7 @@
.progress {
width: vw(100);
:deep(.el-progress-bar__outer) {
height: vh(4) !important;
background-color: #0858ae !important;
}
}
@@ -304,29 +305,27 @@
&:nth-last-child(1) {
margin-bottom: 0;
}
.tag {
&-tag {
padding: 0 vw(16);
font-weight: bold;
font-size: vw(14);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: vw(2);
&--success {
color: #02f9fa;
border: 1px solid #02f9fa;
box-shadow: inset 0 0 vw(8) 0 #0be1ab;
}
&--error {
color: #ee2c2c;
border: 1px solid #ee2c2c;
box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
}
&--primary {
color: #00aaff;
border: 1px solid #00aaff;
box-shadow: inset 0 0 vw(8) 0 #00aaff;
}
}
&-tag--warning {
@extend .item-tag;
background: #feae00;
}
&-tag--error {
@extend .item-tag;
background: #d9011b;
}
&-tag--primary {
@extend .item-tag;
background: #2380fb;
}
.content {
margin-left: vw(4);

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

@@ -1,7 +1,7 @@
<template>
<div class="box-4">
<Title1 title="交通信息" />
<div class="flex justify-evenly pt-10 pb-20">
<div class="traffic-info flex justify-evenly pt-10 pb-20">
<div v-for="item in list" class="cell">
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
<div>
@@ -318,12 +318,15 @@
<style lang="scss" scoped>
.box-4 {
margin-top: vh(120);
width: vw(750);
width: vw(774);
height: vh(950);
padding-left: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-5.png');
background-size: 100% 100%;
.traffic-info {
height: vh(80);
}
.cell {
display: flex;
align-items: center;
@@ -403,25 +406,33 @@
background-size: 100% 100%;
.car {
@extend .icon;
padding-left: vw(90);
width: vw(352);
height: vw(70);
padding-left: vw(90);
margin-left: vw(10);
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('@/assets/images/icon-6.png');
background-size: 100% 100%;
}
.ship {
@extend .icon;
padding-left: vw(90);
width: vw(352);
height: vw(70);
padding-left: vw(90);
margin-left: vw(10);
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('@/assets/images/icon-7.png');
background-size: 100% 100%;
}
.label {
margin-bottom: vh(6);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
margin-bottom: vh(6);
}
.value {
font-weight: bold;
@@ -437,7 +448,7 @@
.table {
position: absolute;
left: vw(160);
width: vw(200);
width: vw(226);
height: vh(96);
z-index: 2;
background: rgba(0, 150, 255, 0.17);

199
src/views/home/components/gauge.vue
View File

@@ -3,102 +3,129 @@
</template>
<script setup>
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
const props = defineProps({
id: {
type: String,
default: () => ''
value: {
type: Number,
default: () => 0
},
colors: {
type: Array,
default: () => ['#02F9FA', '#0063FF']
}
})
let gaugeChart = null
const { id, setOption } = useEchart()
let params = null
watch(
() => props.value,
() => {
init()
}
)
const init = () => {
if (!params) {
params = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
radius: '100%',
splitNumber: 10,
center: ['50%', '60%'],
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: props.value > 50 ? '#FFCBB9' : '#02F9FA'
},
{
offset: 1,
color: props.value > 50 ? '#FF4603' : '#0063FF'
}
],
global: false
},
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(6)
},
axisLine: {
roundCap: false,
lineStyle: {
width: fitChartSize(6)
}
},
pointer: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
width: '100%',
lineHeight: 20,
height: 20,
offsetCenter: [0, '20%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|%}'
},
rich: {
value: {
fontSize: fitChartSize(12),
fontWeight: 'bolder',
color: '#02F9FA'
},
unit: {
fontSize: fitChartSize(12),
color: '#02F9FA'
}
}
},
data: [
{
value: props.value
}
]
}
]
}
} else {
params.series[0].data[0].value = props.value
}
setOption(params)
}
onMounted(() => {
init()
})
const init = () => {
// 基于准备好的dom，初始化echarts实例
gaugeChart = echarts.init(document.getElementById(props.id))
gaugeChart.setOption({
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
radius: '100%',
splitNumber: 10,
center: ['50%', '60%'],
itemStyle: {
color: '#58D9F9',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: fitChartSize(6)
},
axisLine: {
roundCap: true,
lineStyle: {
width: fitChartSize(6)
}
},
pointer: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
width: '100%',
lineHeight: 20,
height: 20,
offsetCenter: [0, '20%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|%}'
},
rich: {
value: {
fontSize: fitChartSize(12),
fontWeight: 'bolder',
color: '#02F9FA'
},
unit: {
fontSize: fitChartSize(12),
color: '#02F9FA'
}
}
},
data: [
{
value: 80
}
]
}
]
})
window.addEventListener('resize', resize)
}
const resize = () => {
if (gaugeChart) {
gaugeChart.dispose()
init()
}
}
</script>
<style lang="scss" scoped>