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-18 11:08:13 +08:00
parent 1108aafed4
commit 44c87aa7ff
8 changed files with 189 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,7 @@
<div class="footer">
<div class="flex">
<div class="item">
<pie :width="140" :height="70" />
<progress1 :width="140" :height="70" />
<div>
<div class="bg">
<span class="label">今日工单总条数：</span>
@@ -45,7 +45,7 @@
</div>
</div>
<div class="item">
<pie :width="140" :height="70" />
<progress1 :width="140" :height="70" />
<div>
<div class="bg">
<span class="label">今日工单总条数：</span>
@@ -90,7 +90,7 @@
<script setup>
import countup from 'vue-countup-v3'
import pie from './pie.vue'
import progress1 from './progress-1.vue'
let count = ref('58459')
</script>

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

@@ -3,33 +3,58 @@
<div class="flex">
<div class="box mr-10">
<Title1 title="排队信息" />
<div class="flex justify-between">
<div class="top 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 class="border">
<div class="pt-10">
<Title3 title="景区排队人数" />
</div>
<Line :width="520" :height="300" />
</div>
<Line :width="540" :height="340" />
</div>
<div class="box mr-10">
<Title1 title="景区承载" />
<div class="flex">
<pie :width="160" :height="50" />
<FProgress :width="200" :height="70" />
<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 class="border">
<div class="pt-10">
<Title3 title="景区排队人数" />
</div>
<Line :width="520" :height="300" />
</div>
<Line :width="540" :height="300" />
</div>
<div class="box-1 mr-10">
<Title1 title="停车信息" />
<div class="flex">
<div class="flex">
<FProgress :width="140" :height="70" />
<FProgress :width="140" :height="70" />
<FProgress :width="140" :height="70" />
</div>
<div class="ml-20 flex flex-1 justify-between">
<count-item label="总停车场数" :count="561" suffix="个" />
<count-item label="总停车位数" :count="150000" suffix="个" />
</div>
</div>
<div class="flex">
<div class="border flex-1">
<Title3 title="今日景区承载量" />
<Line :width="350" :height="310" />
</div>
<div class="border flex-1">
<Title3 title="车辆归属地占比" />
<Pie :width="350" :height="310" />
</div>
</div>
</div>
<div class="box-2">
<Title1 title="安全信息 " />
@@ -40,16 +65,27 @@
<script setup>
import CountItem from './count-item.vue'
import pie from './pie.vue'
import FProgress from './progress-1.vue'
</script>
<style scoped lang="scss">
.container {
flex: 1;
margin: vh(120) vw(10) 0 vw(10);
.top {
padding: 0 vw(10);
height: vh(70);
}
.bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
}
.border {
padding: 0 vw(10);
margin: 0 vw(10);
box-sizing: border-box;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.box {
@extend .bg;
width: vw(575);

6
src/views/scenic/components/count-item.vue
View File

@@ -18,7 +18,7 @@
import countup from 'vue-countup-v3'
let props = defineProps({
label: {
type: Number,
type: String,
default: ''
},
count: {
@@ -58,11 +58,11 @@
color: #02f9fa;
}
.bg {
width: 100%;
height: vh(40);
position: absolute;
left: 0;
top: 0;
width: vw(134);
height: vh(30);
z-index: -1;
}
}

12
src/views/scenic/components/pie.vue → src/views/scenic/components/progress-1.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="gauge"
class="progress"
:id="id"
:style="{
width: styleUtil.px2vw(width),
@@ -25,7 +25,7 @@
default: () => 0
}
})
let gaugeChart = null
let progressChart = null
let id = ref(guid())
let defaultCofig = {
title: [
@@ -163,13 +163,13 @@
})
const init = () => {
// 基于准备好的dom，初始化echarts实例
gaugeChart = echarts.init(document.getElementById(id.value))
gaugeChart.setOption({ ...defaultCofig })
progressChart = echarts.init(document.getElementById(id.value))
progressChart.setOption({ ...defaultCofig })
window.addEventListener('resize', resize)
}
const resize = () => {
if (gaugeChart) {
gaugeChart.dispose()
if (progressChart) {
progressChart.dispose()
init()
}
}