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-17 18:18:07 +08:00
parent 5e5ce522db
commit 1108aafed4
22 changed files with 1061 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/views/scenic/components/box-1.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<div class="box-1">
<div class="header">
<div>
<div class="label">今年总游客数</div>
<countup v-for="item in count" :endVal="item" />
</div>
<div>
<div>
<div class="label">接待状态</div>
<p class="value">安全</p>
</div>
<div>
<div class="label">景区安全</div>
<p class="value">安全</p>
</div>
<div>
<div class="label">景区游玩舒适</div>
<p class="value error">排队</p>
</div>
<div>
<div class="label">通景交通</div>
<p class="value">安全</p>
</div>
<div>
<div class="label">停车场负荷度</div>
<p class="value error">超负荷</p>
</div>
</div>
</div>
<div class="main"> </div>
<div class="footer">
<div class="flex">
<div class="item">
<pie :width="140" :height="70" />
<div>
<div class="bg">
<span class="label">今日工单总条数：</span>
<span class="value"> <countup :endVal="1234" /></span>
</div>
<div class="bg">
<span class="label">工单完成数：</span>
<span class="value"> <countup :endVal="1234" /></span>
</div>
</div>
</div>
<div class="item">
<pie :width="140" :height="70" />
<div>
<div class="bg">
<span class="label">今日工单总条数：</span>
<span class="value"> <countup :endVal="1234" /></span>
</div>
<div class="bg">
<span class="label">工单完成数：</span>
<span class="value"> <countup :endVal="1234" /></span>
</div>
</div>
</div>
</div>
<div class="flex align-center justify-between">
<div>
<div class="cell">
<span class="tag tag--success">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="cell">
<span class="tag tag--error">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="cell">
<span class="tag tag--primary">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
</div>
<div class="more">查看更多</div>
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
import pie from './pie.vue'
let count = ref('58459')
</script>
<style scoped lang="scss">
.box-1 {
margin-top: vh(120);
width: vw(810);
height: vh(950);
padding: vw(10);
box-sizing: border-box;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.header {
display: flex;
margin-top: vh(10);
& > div:nth-child(1) {
width: vw(300) !important;
}
& > 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;
}
.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;
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 {
width: 100%;
height: vh(600);
}
.footer {
.item {
flex: 1;
height: vh(120);
display: flex;
align-items: center;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
.bg {
padding-left: vw(20);
width: vw(243);
height: vh(40);
display: flex;
align-items: center;
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
&:nth-child(1) {
margin-bottom: vh(4);
}
.label {
font-weight: 400;
font-size: vw(14);
color: #fff;
}
.value {
font-weight: bold;
font-size: vw(28);
color: #02f9fa;
}
}
}
.cell {
display: flex;
margin-left: vw(4);
margin-top: vh(12);
&:nth-last-child(1) {
margin-bottom: 0;
}
.tag {
padding: 0 vw(16);
font-weight: bold;
font-size: vw(14);
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;
}
}
.content {
margin-left: vw(4);
padding: 0 vw(10);
width: vw(660);
height: vh(24);
line-height: vh(24);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
font-size: vw(14);
color: #ffffff;
border-radius: vw(2);
background: rgba(0, 150, 255, 0.28);
}
}
.more {
cursor: pointer;
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;
}
}
}
</style>

69
src/views/scenic/components/box-2.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div class="container">
<div class="flex">
<div class="box mr-10">
<Title1 title="排队信息" />
<div class="flex justify-between">
<count-item label="今日出票" :count="35600" suffix="张" />
<count-item label="今日接待人数" :count="35600" suffix="人" />
<count-item label="排队人数" :count="35600" suffix="人" />
<count-item label="排队持续时间" :count="35600" suffix="S" />
</div>
<div class="pt-10">
<Title3 title="景区排队人数" />
</div>
<Line :width="540" :height="340" />
</div>
<div class="box mr-10">
<Title1 title="景区承载" />
<div class="flex">
<pie :width="160" :height="50" />
<div class="flex flex-1 justify-between">
<count-item label="景区当前人数" :count="35600" suffix="张" />
<count-item label="景区最大承载" :count="35600" suffix="人" />
</div>
</div>
<div class="pt-10">
<Title3 title="景区排队人数" />
</div>
<Line :width="540" :height="300" />
</div>
<div class="box-1 mr-10">
<Title1 title="停车信息" />
</div>
<div class="box-2">
<Title1 title="安全信息 " />
</div>
</div>
</div>
</template>
<script setup>
import CountItem from './count-item.vue'
import pie from './pie.vue'
</script>
<style scoped lang="scss">
.container {
flex: 1;
margin: vh(120) vw(10) 0 vw(10);
.bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
}
.box {
@extend .bg;
width: vw(575);
height: vh(475);
}
.box-1 {
@extend .bg;
width: vw(770);
height: vh(475);
}
.box-2 {
@extend .bg;
width: vw(440);
height: vh(475);
}
}
</style>

70
src/views/scenic/components/count-item.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<div class="count-item">
<div class="flex align-center">
<img src="@/assets/images/dian.svg" />
<span class="label">{{ label }}</span>
</div>
<div class="count">
<img class="bg" src="@/assets/images/count-bg.svg" />
<div class="flex align-center">
<countup class="value" :end-val="count" />
<span class="suffix">{{ suffix }}</span>
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
let props = defineProps({
label: {
type: Number,
default: ''
},
count: {
type: Number,
default: 0
},
suffix: {
type: String,
default: ''
}
})
</script>
<style scoped lang="scss">
.count-item {
flex: 1;
.label {
font-weight: 400;
font-size: vw(14);
margin-left: vw(4);
color: rgba(255, 255, 255, 0.9);
}
.count {
position: relative;
margin-top: vh(10);
z-index: 1;
.value {
padding-left: vw(20);
font-weight: bold;
font-size: vw(28);
color: #02f9fa;
}
.suffix {
margin-top: vh(4);
font-weight: bold;
font-size: vw(12);
color: #02f9fa;
}
.bg {
width: 100%;
height: vh(40);
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
}
}
</style>

178
src/views/scenic/components/pie.vue Normal file
View File

@@ -0,0 +1,178 @@
<template>
<div
class="gauge"
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
}"
/>
</template>
<script setup>
import * as echarts from 'echarts'
import { guid } from '@/utils/util'
import styleUtil from '@/utils/styleUtil'
import { fitChartSize } from '@/utils/dataUtil'
const props = defineProps({
width: {
type: Number,
default: () => 0
},
height: {
type: Number,
default: () => 0
}
})
let gaugeChart = null
let id = ref(guid())
let defaultCofig = {
title: [
{
text: '45.5%',
x: 'center',
top: '34%',
textStyle: {
color: '#00D0FF',
fontSize: fitChartSize(12)
}
},
{
text: '完成率',
x: 'center',
top: '56%',
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
],
series: [
// 内侧环
{
type: 'gauge',
radius: '100%',
center: ['50%', '60%'],
min: 0,
max: 100,
startAngle: 180,
endAngle: 0,
itemStyle: {
color: '#00D0FF'
},
axisLine: {
show: true,
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(6)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(6)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: 50
}
]
},
{
type: 'gauge',
radius: '90%',
center: ['50%', '60%'],
min: 0,
max: 100,
startAngle: 180,
endAngle: 0,
itemStyle: {
color: '#057EB9'
},
axisLine: {
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(6)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(6)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: 50
}
]
}
]
}
onMounted(() => {
init()
})
const init = () => {
// 基于准备好的dom，初始化echarts实例
gaugeChart = echarts.init(document.getElementById(id.value))
gaugeChart.setOption({ ...defaultCofig })
window.addEventListener('resize', resize)
}
const resize = () => {
if (gaugeChart) {
gaugeChart.dispose()
init()
}
}
</script>
<style lang="scss" scoped></style>