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-16 12:37:23 +08:00
parent ef5cb642ca
commit 2a11f91d36
43 changed files with 2644 additions and 3108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

398
src/views/monitor/components/box-1.vue Normal file
View File

@@ -0,0 +1,398 @@
<template>
<div class="box-1">
<Title1 title="交通信息" />
<div class="traffic">
<div class="traffic-item">
<span class="traffic-item__title">总核心监控点位</span>
<countup class="traffic-item__value--primary" end-val="895" />
</div>
<div class="traffic-item">
<span class="traffic-item__title">总核心监控点位</span>
<countup class="traffic-item__value--success" end-val="895" />
</div>
<div class="traffic-item">
<span class="traffic-item__title">总核心监控点位</span>
<countup class="traffic-item__value--error" end-val="895" />
</div>
</div>
<Title1 title="景区信息" />
<div class="scenic">
<div class="scenic-item">
<span class="scenic-item__label">核心路段监控点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">核心景区分析点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">异常点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">异常告警</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">已处理</span>
<countup class="scenic-item__value" end-val="895" />
</div>
</div>
<div class="flex pt-20">
<div class="box">
<Title3 title="异常告警" />
<Line
:width="370"
:height="180"
: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 class="box">
<Title3 title="异常告警占比" />
<div class="flex">
<alarmRate :dataList="dataList" />
<alarmList />
</div>
</div>
</div>
<Title1 title="交通信息" />
<div class="scenic">
<div class="scenic-item">
<span class="scenic-item__label">核心路段监控点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">核心景区分析点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">拥堵路段</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">拥堵告警</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">已处理</span>
<countup class="scenic-item__value" end-val="895" />
</div>
</div>
<div class="flex pt-20">
<div class="box">
<Title3 title="异常告警" />
<Line
:width="370"
:height="180"
: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 class="box">
<Title3 title="异常告警占比" />
<div class="flex">
<alarmRate :dataList="dataList" />
<alarmList />
</div>
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
import alarmRate from './alarmRate'
import alarmList from './alarmList'
const dataList = ref([
{
name: '云阳',
value: 20
},
{
name: '奉节',
value: 10
},
{
name: '巫山',
value: 70
}
])
</script>
<style scoped lang="scss">
:deep(.el-select__wrapper) {
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
border: none;
box-shadow: none;
border-top-left-radius: vh(30);
border-bottom-left-radius: vh(30);
font-size: vw(14);
color: #fff;
}
.line-chart {
width: 100%;
height: vh(200);
}
.box-1 {
margin-top: vh(120);
width: vw(800);
height: vh(950);
padding: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
.traffic {
margin-top: vh(20);
height: vh(72);
display: flex;
align-items: center;
justify-content: space-evenly;
&-item {
width: vw(229);
height: vw(72);
font-weight: 400;
font-size: vw(14);
color: #fff;
padding-left: vw(84);
display: flex;
flex-direction: column;
justify-content: center;
&:nth-child(1) {
background-image: url('@/assets/images/m-t-1.png');
background-size: 100% 100%;
}
&:nth-child(2) {
background-image: url('@/assets/images/m-t-2.png');
background-size: 100% 100%;
}
&:nth-child(3) {
background-image: url('@/assets/images/m-t-3.png');
background-size: 100% 100%;
}
}
&-item__title {
margin-bottom: vh(6);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
&-item__value--primary {
font-weight: bold;
font-size: vw(24);
color: #12b5fd;
}
&-item__value--success {
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
}
&-item__value--error {
font-weight: bold;
font-size: vw(24);
color: #f15a25;
}
}
.scenic {
display: flex;
align-items: center;
height: vh(106);
gap: vw(20);
&-item {
width: vw(142);
height: vw(106);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:nth-child(1) {
background-image: url('/src/assets/images/four-t-1.png');
background-size: 100% 100%;
.scenic-item__value {
color: #02f9fa;
}
}
&:nth-child(2) {
background-image: url('/src/assets/images/four-t-1.png');
background-size: 100% 100%;
.scenic-item__value {
color: #02f9fa;
}
}
&:nth-child(3) {
background-image: url('/src/assets/images/four-t-2.png');
background-size: 100% 100%;
.scenic-item__value {
color: #f15a25;
}
}
&:nth-child(4) {
background-image: url('/src/assets/images/four-t-3.png');
background-size: 100% 100%;
.scenic-item__value {
color: #f15a25;
}
}
&:nth-child(5) {
background-image: url('/src/assets/images/four-t-4.png');
background-size: 100% 100%;
.scenic-item__value {
color: #12b5fd;
}
}
}
&-item__label {
font-weight: 400;
font-size: vw(14);
color: #fff;
}
&-item__value {
font-weight: bold;
font-size: vw(24);
margin-top: vh(10);
}
}
.unit {
color: #02f9fa;
font-size: vw(14);
margin-bottom: vh(4);
}
.box {
width: vw(394);
height: vh(220);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
.title-2 {
width: vw(253);
height: vh(28);
display: flex;
align-items: center;
background-image: url('@/assets/images/title-5.png');
background-size: 100% 100%;
& > span {
padding-left: vw(22);
font-weight: bold;
font-size: vw(15);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
.statistic {
display: flex;
margin-top: vh(12);
width: 100%;
height: vh(88);
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;
}
&-title {
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
&-value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
}
.count {
font-weight: bold;
font-size: vw(28);
color: #ff4400 !important;
}
.prefix,
.suffix {
color: #ff4400;
font-size: vw(12);
}
}
.title-3 {
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
& > span {
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
}
}
</style>