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

136
src/views/traffic/components/box-1.vue
View File

@@ -1,28 +1,28 @@
<template>
<div class="traffic-box-1">
<div class="title-num">
<div class="box-1">
<div class="statistics">
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /> </span>
<div class="item-num">
<span><countup endVal="334600" /> </span>
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-num"
><span><countup endVal="88895" /> </span>
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总拥堵路段 </div>
<div class="item-num">
<span><countup endVal="35600" /> </span>
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />核心路段 </div>
<div class="item-num"
><span><countup endVal="88895" /></span>
><span><countup endVal="15000" /></span>
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵路口 </div>
<div class="item-num"
><span><countup endVal="88895" /></span>
><span><countup endVal="2345" /></span>
</div>
</div>
</div>
@@ -61,85 +61,85 @@
</script>
<style lang="scss" scoped>
.chart {
display: flex;
flex-wrap: wrap;
gap: vw(8);
padding: vw(8);
.box-1 {
margin-top: vh(120);
width: vw(940);
height: vh(950);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
&-item {
width: vw(444);
height: vh(420);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
&__inner {
.chart {
display: flex;
align-items: center;
}
&__legend {
flex: 1;
flex-wrap: wrap;
gap: vw(8);
padding: 0 vw(8);
&-item {
position: relative;
width: 100%;
height: vh(40);
width: vw(456);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
&__inner {
display: flex;
align-items: center;
margin-bottom: vh(8);
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
height: vh(380);
}
&::before {
position: absolute;
content: '';
width: vw(4);
&__legend {
flex: 1;
&-item {
position: relative;
width: 100%;
height: vh(40);
background-color: #0096ff;
}
display: flex;
align-items: center;
margin-bottom: vh(8);
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
.dot {
width: vw(4);
height: vw(4);
margin: 0 vw(16);
}
&::before {
position: absolute;
content: '';
width: vw(4);
height: vh(40);
background-color: #0096ff;
}
.name {
font-weight: 400;
font-size: vw(12);
color: #ffffff;
width: vw(130);
}
.dot {
width: vw(4);
height: vw(4);
margin: 0 vw(16);
}
.value {
font-weight: bold;
font-size: vw(15);
color: #ffffff;
.name {
font-weight: 400;
font-size: vw(12);
color: #ffffff;
width: vw(130);
}
.value {
font-weight: bold;
font-size: vw(15);
color: #ffffff;
}
}
}
}
}
.traffic-box-1 {
position: relative;
margin-top: vh(120);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.title-num {
.statistics {
padding: 0 vw(40);
height: vh(110);
display: flex;
justify-content: flex-start;
padding: vw(40);
align-items: center;
.item-box {
flex: 1;
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.8);
color: #fff;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: vh(20);
img {
margin-right: vw(5);

181
src/views/traffic/components/box-2.vue
View File

@@ -1,30 +1,26 @@
<template>
<div class="n-box-traffic">
<!-- nav -->
<div class="left-nav">
<div class="top-box">
<div class="ul">
<div class="li active">路段1</div>
<div class="li">路段1</div>
<div class="li">路段1</div>
<div class="li">路段1</div>
<div class="li">路段1</div>
<div class="box-2">
<ul class="nav">
<li
class="nav-item"
:class="{ active: current == index }"
v-for="(item, index) in 20"
:key="index"
@click="handleNav(index)"
>路段{{ index + 1 }}
</li>
</ul>
<div class="map-box">
<Map />
<div class="video-list">
<div class="li">
<vue3VideoPlay v-bind="options" />
</div>
</div>
</div>
<div class="traffic-box-2">
<div class="map-box">
<Map></Map>
<!-- 视频 -->
<div class="video-list">
<div class="li">
<vue3VideoPlay v-bind="options" />
</div>
<div class="li">
<vue3VideoPlay v-bind="options" />
</div>
<div class="menu">查看更多</div>
<div class="li">
<vue3VideoPlay v-bind="options" />
</div>
<div class="menu">查看更多</div>
</div>
</div>
</div>
@@ -32,6 +28,7 @@
<script setup>
import Map from '@/components/Map/marker.vue'
let current = ref(0)
const options = reactive({
src: 'http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8', //视频源
type: 'm3u8', //视频类型
@@ -59,56 +56,47 @@
'fullScreen'
] //显示所有按钮,
})
const handleNav = (e) => {
current.value = e
}
</script>
<style lang="scss" scoped>
.n-box-traffic {
.box-2 {
display: flex;
margin-top: vh(120);
}
.left-nav {
.nav {
margin-left: vw(10);
// margin-top:vh(35);
// width:vw(250);
.top-box {
text-align: left;
font-weight: 400;
overflow: auto;
height: vh(950);
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
&-item {
cursor: pointer;
margin-bottom: vw(15);
width: vw(120);
height: vh(54);
font-weight: bold;
font-size: vw(18);
color: rgba(255, 255, 255, 0.7);
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
.title {
font-weight: 600;
font-size: vw(15);
text-align: left;
font-style: normal;
text-transform: none;
height: vh(35);
line-height: vh(34);
padding-left: vw(20);
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
}
.ul {
.li {
background: url('/src/assets/images/m-nav-bg-1.png');
background-size: 100% 100%;
width: vw(120);
height: vh(58);
line-height: vh(58);
text-align: center;
margin-bottom: vh(15);
}
.active {
background: url('/src/assets/images/m-nav-bg-2.png');
background-size: 100% 100%;
// width:vw(178);
}
}
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
background: url('/src/assets/images/m-nav-bg-1.png');
background-size: 100% 100%;
}
.active {
background: url('/src/assets/images/m-nav-bg-2.png');
background-size: 100% 100%;
}
}
.traffic-box-2 {
.map-box {
position: relative;
z-index: 9;
width: vw(1290);
@@ -118,41 +106,36 @@
box-sizing: border-box;
background-image: url('/src/assets/images/map-bg-2.png');
background-size: 100% 100%;
.map-box {
width: 100%;
height: 100%;
position: relative;
.video-list {
width: vw(320);
height: vh(120);
background: #0a254b;
border-radius: 0px 0px 0px 0px;
position: absolute;
bottom: vw(10);
right: vw(10);
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
.li {
width: vw(140);
height: vh(105);
background-image: url('/src/assets/images/small-v-bg.png');
background-size: 100% 100%;
margin-right: vw(6);
}
.menu {
width: vw(12);
height: vh(60);
font-family: Inter, Inter;
font-weight: 400;
font-size: vw(12);
color: #ffffff;
line-height: vh(14);
text-align: left;
font-style: normal;
text-transform: none;
}
.video-list {
width: vw(320);
height: vh(120);
background: #0a254b;
border-radius: 0px 0px 0px 0px;
position: absolute;
bottom: vw(40);
right: vw(40);
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
.li {
width: vw(140);
height: vh(105);
background-image: url('/src/assets/images/small-v-bg.png');
background-size: 100% 100%;
margin-right: vw(6);
}
.menu {
width: vw(12);
height: vh(60);
font-family: Inter, Inter;
font-weight: 400;
font-size: vw(12);
color: #ffffff;
line-height: vh(14);
text-align: left;
font-style: normal;
text-transform: none;
}
}
}

330
src/views/traffic/components/box-3.vue
View File

@@ -1,116 +1,65 @@
<template>
<div class="traffic-box-3">
<!-- 1 -->
<div class="content-1">
<div class="tp-title">
<div class="box-1">
<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="" />
<div class="xl-title">施家梁子大桥</div>
<div class="tp-item">3号摄像机</div>
<div class="tp-item item-bg-2">3号点位</div>
<div class="box-3">
<div class="item" v-for="(item, index) in 2" :key="index">
<div class="header">
<div class="header-left">
<img src="@/assets/images/work-icon-xl-1.png" />
<div class="header-left__title">施家梁子大桥</div>
<div class="header-left__camera">3号摄像机</div>
<div class="header-left__point">3号点位</div>
</div>
<div class="rt-text">严重拥堵</div>
<div class="header-status">严重拥堵</div>
</div>
<div class="title-num">
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />路段长度 </div>
<div class="item-num"
><span>
<countup endVal="88895" />
</span>
<div class="statistics">
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />路段长度
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />平均车速 </div>
<div class="item-num"
><span> <countup endVal="88895" /> </span
></div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />平均车速
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离 </div>
<div class="item-num"
><span> <countup endVal="88895" /> </span
></div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵次数 </div>
<div class="item-num"
><span> <countup endVal="88895" /> </span
></div>
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵次数
</div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="item-box">
<div class="item-t flex">
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵开始时间
</div>
<div class="item-num"><span>12:00:00</span></div>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="item-box">
<div class="item-t flex">
<div class="statistics-item">
<div class="statistics-item__label">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵持续时长
</div>
<div class="item-num"><span>1h30S</span></div>
</div>
</div>
<!-- chart -->
<div class="chart-item">
<div class="title-3"><span>拥堵频次占比</span></div>
<div class="chart-box">
<v-chart class="chart" :option="option1" autoresize />
</div>
</div>
</div>
<!-- 2 -->
<div class="content-1 content-2">
<div class="tp-title">
<div class="box-1">
<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="" />
<div class="xl-title">施家梁子大桥</div>
<div class="tp-item">3号摄像机</div>
<div class="tp-item item-bg-2">3号点位</div>
</div>
<div class="rt-text rt-text-2">常规拥堵</div>
</div>
<div class="title-num">
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />路段长度 </div>
<div class="item-num"
><span>
<countup endVal="88895" />
</span>
<div class="statistics-item__value">
<countup end-val="88895" />
</div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />平均车速 </div>
<div class="item-num"
><span> <countup endVal="88895" /> </span
></div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离 </div>
<div class="item-num"
><span> <countup endVal="88895" /> </span
></div>
</div>
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵次数 </div>
<div class="item-num"
><span> <countup endVal="88895" /> </span
></div>
</div>
<div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵开始时间
</div>
<div class="item-num"><span>12:00:00</span></div>
</div>
<div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵持续时长
</div>
<div class="item-num"><span>1h30S</span></div>
</div>
</div>
<!-- chart -->
<div class="chart-item">
<div class="title-3"><span>拥堵频次占比</span></div>
<div class="chart-box">
@@ -285,19 +234,82 @@
</script>
<style lang="scss" scoped>
.traffic-box-3 {
.box-3 {
width: vw(813);
padding: 0 vw(8);
margin-top: vh(120);
width: vw(818);
height: vh(480);
padding: vw(8);
position: relative;
z-index: 9;
background: linear-gradient(330deg, #0b2f64 0%, #062b57 100%);
.content-2 {
margin-top: vh(20);
}
.content-1 {
.item {
margin-bottom: vh(10);
background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
.header {
height: vh(72);
display: flex;
align-items: center;
&-left {
flex: 1;
display: flex;
align-items: center;
> img {
width: vw(30);
height: auto;
margin-right: vw(15);
}
}
&-left__title {
margin-right: vw(20);
font-size: vw(28);
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
&-left__camera {
width: vw(120);
height: vw(72);
background-image: url('/src/assets/images/t-a-1.png');
background-size: 100% 100%;
font-weight: 600;
font-size: vw(15);
color: #ffffff;
padding-left: vw(42);
text-align: left;
font-style: normal;
text-transform: none;
display: flex;
align-items: center;
margin: 0 vw(20);
}
&-left__point {
margin: 0 vw(20);
width: vw(120);
height: vw(72);
font-weight: 600;
font-size: vw(15);
color: #ffffff;
padding-left: vw(42);
display: flex;
align-items: center;
background-image: url('/src/assets/images/t-a-2.png');
background-size: 100% 100%;
}
&-status {
width: vw(120);
height: vw(40);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
display: flex;
align-items: center;
padding-left: vw(40);
background-image: url('/src/assets/images/t-b-1.png');
background-size: 100% 100%;
}
}
.chart-item {
margin-top: vh(10);
height: vh(293);
@@ -337,28 +349,36 @@
}
}
.title-num {
.statistics {
height: vh(90);
display: flex;
justify-content: flex-start;
padding: vw(20);
background: radial-gradient(70% at 99% 50%, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
align-items: center;
justify-content: space-evenly;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&-item__label {
font-weight: 400;
font-size: vw(14);
color: #fff;
margin-bottom: vh(10);
}
&-item__value {
padding-left: vw(15);
height: vh(30);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
}
.item-box {
flex: 1;
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.8);
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: vh(20);
img {
margin-right: vw(5);
width: vw(8);
@@ -389,74 +409,6 @@
}
}
}
.tp-title {
height: vh(72);
display: flex;
align-items: center;
.box-1 {
flex: 1;
display: flex;
align-items: center;
.icon-xl {
width: vw(30);
height: vh(22);
margin-right: vw(15);
}
.xl-title {
font-size: vw(28);
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
margin-right: vw(20);
}
.tp-item {
width: vw(120);
height: vw(72);
background-image: url('/src/assets/images/t-a-1.png');
background-size: 100% 100%;
font-weight: 600;
font-size: vw(15);
color: #ffffff;
padding-left: vw(42);
text-align: left;
font-style: normal;
text-transform: none;
display: flex;
align-items: center;
margin: 0 vw(20);
}
.item-bg-2 {
background-image: url('/src/assets/images/t-a-2.png');
background-size: 100% 100%;
}
}
.rt-text {
width: vw(116);
height: vw(40);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
text-align: left;
line-height: vw(40);
padding-left: vw(40);
background-image: url('/src/assets/images/t-b-1.png');
background-size: 100% 100%;
}
.rt-text-2 {
background-image: url('/src/assets/images/t-b-2.png');
background-size: 100% 100%;
}
}
}
}
</style>