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-26 18:30:52 +08:00
parent 809c950301
commit dc1ad009c7
16 changed files with 1085 additions and 1246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,118 +1,268 @@
<template>
<div class="box-3">
<div class="header">
<div class="flex">
<div class="left">
<div class="item">
<div class="label">今年总游客数</div>
<ScrollNumber :count="count" prefix="1" />
</div>
<div class="item">
<div class="label">全县景区总游客人数</div>
<ScrollNumber :count="count" prefix="2" />
</div>
<div class="item">
<div class="label">总在园人数</div>
<ScrollNumber :count="count" prefix="3" />
</div>
</div>
<div class="right">
<div class="item">
<div class="label">安全度</div>
<div class="value">安全</div>
</div>
<div class="item">
<div class="label">舒适度</div>
<div class="value">舒适</div>
</div>
<div class="item">
<div class="label">接待情况</div>
<div class="value">排队</div>
</div>
<div class="item">
<div class="label">交通拥挤度</div>
<div class="value">舒适</div>
</div>
<div class="item">
<div class="label">停车场负荷度</div>
<div class="value">超负荷</div>
</div>
<div class="box-4">
<Title1 title="交通信息" />
<div class="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>
<countup :end-val="item.value" />
<div class="label">{{ item.label }}</div>
</div>
</div>
</div>
<div class="rela">
<div class="alarm-box">
<ul class="flex">
<li class="alarm-item" v-for="(item, index) in list" :key="index">
<img class="icon" :src="item.icon" />
<span>{{ item.label }}</span>
</li>
</ul>
<div class="flex">
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<div class="">
<Line
:width="250"
:height="150"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<Line
:width="250"
:height="150"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<jam :width="250" :height="200" />
</div>
</div>
<Map />
</div>
<div class="footer">
<div class="left">
<Title1 title="停车信息" />
<div class="stop-box">
<div>
<img class="icon" src="@/assets/images/icon-5.png" alt="" />
<div>
<div class="flex justify-center pt-10">
<div class="item">
<p class="label">今日工单总条数</p>
<countup :endVal="1234" />
</div>
<div class="item">
<p class="label">工单完成数</p>
<countup :endVal="1234" />
</div>
</div>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress-1">
<el-progress :percentage="50" :show-text="false" />
</div>
<span class="value">50%</span>
</div>
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
</div>
<div>
<div class="flex justify-center pt-10">
<div class="item">
<p class="label">紧急工单数</p>
<countup :endVal="1234" />
</div>
<div class="item">
<p class="label">紧急工单完成数</p>
<countup :endVal="1234" />
</div>
</div>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress-2">
<el-progress :percentage="50" :show-text="false" />
</div>
<span class="value">50%</span>
<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"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
</div>
</div>
<div class="right">
<div class="item">
<span class="tag tag--success">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
<div class="box-1">
<div class="pt-10">
<Title3 title="拥堵路段总数" />
<traffic-flow />
</div>
<div class="item">
<span class="tag tag--error">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</div>
<div class="box-1">
<div class="pt-10">
<Title3 title="景区停车场空位" />
<vacancy />
</div>
<div class="item">
<span class="tag tag--primary">普通</span>
<p class="content">
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
</p>
</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="homeData?.carShipData.car.count" />
<span class="unit">辆</span>
</div>
</div>
<div class="table">
<div class="header">
<div>景区</div>
<div>调度</div>
<div>空余</div>
</div>
<div class="cell" v-for="item in homeData?.carShipData.car.info" :key="index">
<div>{{ item.scenic_area }}</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
</div>
</div>
</div>
<div>
<div class="ship">
<div class="label">车总数</div>
<div class="flex align-center">
<countup class="value" :end-val="homeData?.carShipData.ship.count" />
<span class="unit">辆</span>
</div>
<div class="table">
<div class="header">
<div>景区</div>
<div>调度</div>
<div>空余</div>
</div>
<div
class="cell"
v-for="(item, index) in homeData?.carShipData.ship.info"
:key="index"
>
<div>白帝城</div>
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="hotel">
<div>
<div class="item">
<div class="label">酒店总数</div>
<countup class="value" :end-val="homeData?.hotelData.info.hotel_count || 0" />
</div>
<div class="item">
<div class="label">房间总数</div>
<countup class="value" :end-val="homeData?.hotelData.info.total_room_count || 0" />
</div>
<div class="item">
<div class="label">总入住</div>
<countup
class="value"
color="#02F9FA"
:end-val="homeData?.hotelData.info.total_guest_count || 0"
/>
</div>
<div class="item">
<div class="label">总入住率</div>
<countup
class="value"
color="#02F9FA"
:end-val="homeData?.hotelData.info.occupancy_rate || 0"
/>
</div>
</div>
<div>
<div class="lodging">
<Title3 title="酒店入住人数及入住率" />
</div>
<occupancy />
</div>
</div>
</div>
@@ -120,231 +270,263 @@
</template>
<script setup>
import jam from './jam.vue'
import vacancy from './vacancy.vue'
import occupancy from './occupancy.vue'
import TrafficFlow from './traffic-flow.vue'
import countup from 'vue-countup-v3'
import ScrollNumber from '@/components/ScrollNumber/index.vue'
import icon8 from '@/assets/images/icon-8.png'
import icon9 from '@/assets/images/icon-9.png'
import icon10 from '@/assets/images/icon-10.png'
import icon11 from '@/assets/images/icon-11.png'
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'
const homeData = inject('homeData')
let count = ref('6945959')
let list = ref([
{
label: '安全异常',
icon: icon8
label: '路段总数',
value: '1234',
icon: icon1
},
{
label: '排队异常',
icon: icon9
label: '当前拥堵路段',
value: '1234',
icon: icon2
},
{
label: '停车异常',
icon: icon10
label: '总拥堵次数',
value: '1234',
icon: icon3
},
{
label: '舆论异常',
icon: icon11
label: '最大拥堵时长',
value: '1234',
icon: icon4
}
])
</script>
<style lang="scss" scoped>
.box-3 {
width: vw(1614);
height: vh(950);
.box-4 {
margin-top: vh(120);
.header {
width: vw(1614);
height: vh(128);
padding: 0 vw(90);
box-sizing: border-box;
background-image: url('@/assets/images/group.png');
width: vw(750);
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: auto;
}
.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%;
.left {
display: flex;
width: vw(950);
margin-top: vh(20);
}
.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: auto;
}
.right {
& > div {
flex: 1;
height: vh(70);
display: flex;
margin-top: vh(20);
}
.item {
flex: 1;
align-items: center;
justify-content: space-evenly;
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.label {
margin-bottom: vh(20);
font-weight: 400;
font-size: vw(16);
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(28);
font-size: vw(24);
color: #ffffff;
}
.error {
color: #e21b1b;
}
.success {
color: #02f9fa;
line-height: vh(33);
}
}
.countup-wrap {
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%);
}
}
.alarm-box {
position: absolute;
top: vw(20);
left: vw(20);
z-index: 99999;
.alarm-item {
width: vw(110);
height: vh(40);
margin-right: vw(4);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, rgba(238, 44, 44, 0) 0%, #ee2c2c 100%);
.icon {
width: vw(20);
height: vw(20);
margin-right: vw(4);
}
}
}
.footer {
display: flex;
width: 100%;
height: vh(120);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.left {
.car-ship {
flex: 1;
& > div {
position: relative;
flex: 1;
height: vh(110);
display: flex;
margin-top: vh(4);
& > div {
flex: 1;
height: vh(110);
margin-right: vw(6);
background-image: url('@/assets/images/bg-3.png');
align-items: center;
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.icon {
padding-left: vw(90);
width: vw(352);
height: vh(70);
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.car {
@extend .icon;
background-image: url('@/assets/images/icon-6.png');
background-size: 100% 100%;
.item {
padding: vh(10) vw(24);
}
.ship {
@extend .icon;
background-image: url('@/assets/images/icon-7.png');
background-size: 100% 100%;
}
.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;
flex-direction: column;
align-items: center;
justify-content: center;
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(27);
line-height: vh(27);
text-align: center;
background: #074686;
&:nth-child(2n + 1) {
background: rgba(0, 150, 255, 0.1);
}
& > div {
flex: 1;
}
& > div:nth-child(1) {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
& > div:nth-child(2) {
font-weight: bold;
font-size: vw(18);
color: #ffffff;
}
& > div:nth-child(3) {
font-weight: bold;
font-size: vw(18);
color: #02f9fa;
}
.unit-1 {
font-size: vw(12);
}
}
}
}
}
.hotel {
flex: 1;
margin-left: vw(6);
& > div:nth-child(1) {
display: flex;
width: vw(360);
height: vh(70);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.label {
font-weight: 400;
font-size: vw(14);
margin-bottom: vh(10);
color: rgba(255, 255, 255, 0.9);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-weight: bold;
}
.progress-box {
.value {
margin-top: vh(10);
display: flex;
align-items: center;
justify-content: center;
.text {
margin-right: vw(10);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
.progress {
width: vw(100);
:deep(.el-progress-bar__outer) {
background-color: #0858ae !important;
}
}
.progress-1 {
@extend .progress;
:deep(.el-progress-bar__inner) {
background: linear-gradient(to right, #0566bb 0%, #00c4f9 100%);
}
}
.progress-2 {
@extend .progress;
:deep(.el-progress-bar__inner) {
background: linear-gradient(to right, #0566bb 0%, #d6383a 100%);
}
}
.value {
margin-left: vw(10);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
font-weight: bold;
font-size: vw(24);
color: #ffffff;
}
}
}
.right {
padding: vh(10) vw(24);
.item {
display: flex;
margin-bottom: 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(900);
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);
}
}
& > div:nth-child(2) {
padding-top: vh(10);
margin-top: vh(8);
width: vw(360);
height: vh(140);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
}
}
}
.lodging {
:deep(.title-3) {
margin-top: vh(10);
}
}
.title1 {
:deep(.title) {
width: vw(300) !important;
}
}
</style>