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-08 18:05:12 +08:00
parent ab1ab210a9
commit 9ee304c8c2
39 changed files with 2081 additions and 1926 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,474 +1,462 @@
<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>
<div class="rt-text">严重拥堵</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>
</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">
<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>
</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">
<v-chart class="chart" :option="option1" autoresize />
</div>
</div>
</div>
</div>
<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>
<div class="rt-text">严重拥堵</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>
</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">
<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>
</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">
<v-chart class="chart" :option="option1" autoresize />
</div>
</div>
</div>
</div>
</template>
<script setup>
import countup from 'vue-countup-v3'
import * as echarts from 'echarts'
import {
fitChartSize
} from '@/utils/dataUtil'
import Map from '@/components/Map/marker.vue'
import VChart, {
THEME_KEY
} from 'vue-echarts';
import {
ref,
provide
} from 'vue';
import countup from 'vue-countup-v3'
import { fitChartSize } from '@/utils/dataUtil'
import VChart, { THEME_KEY } from 'vue-echarts'
provide(THEME_KEY, 'dark');
const option1 = ref({
backgroundColor: 'transparent',
width: '92%',
// height: fitChartSize(300),
grid: {
top: fitChartSize(90),
bottom: '0',
left: '4%',
containLabel: true,
},
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#0096FF' // 0% 处的颜色
},
{
offset: 1,
color: '#004D88' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#FFCB39' // 0% 处的颜色
}, {
offset: 1,
color: '#0A4190' // 100% 处的颜色
}],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#9846FE' // 0% 处的颜色
}, {
offset: 1,
color: '#0A4190' // 100% 处的颜色
}],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#FF5619' // 0% 处的颜色
}, {
offset: 1,
color: '#0A4190' // 100% 处的颜色
}],
global: false // 缺省为 false
},
],
legend: {
type: 'plain',
orient: 'horizontal',
right: fitChartSize(10),
top: fitChartSize(10),
bottom: fitChartSize(20),
itemWidth: 6,
itemHeight: 6,
},
tooltip: {},
dataset: {
source: [
['product', '路段类型1', '路段类型2', '路段类型3', '路段类型4'],
['10:00', 399.3, 185.8, 293.7, 123],
['10:30', 83.1, 273.4, 455.1, 123],
['11:00', 86.4, 465.2, 382.5, 123],
['11:30', 72.4, 153.9, 439.1, 123],
['12:00', 72.4, 453.9, 239.1, 123],
['12:30', 72.4, 453.9, 239.1, 123],
['13:00', 86.4, 465.2, 282.5, 123],
['13:30', 72.4, 453.9, 239.1, 123],
['14:00', 72.4, 453.9, 239.1, 123],
['14:30', 72.4, 453.9, 239.1],
]
},
xAxis: {
type: 'category',
axisTisk: {
show: true,
// 设置刻度长度
length: 1,
lineStyle: {
type: 'dashed', // 设置为虚线
width: 0,
}
},
},
yAxis: {
type: 'value',
min: 0,
max: 500,
interval: 100,
axisLabel: {
fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
color: '#eee',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#00D0FF'
}
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [{
type: 'bar'
}, {
type: 'bar'
}, {
type: 'bar'
},
{
type: 'bar'
}
]
})
provide(THEME_KEY, 'dark')
const option1 = ref({
backgroundColor: 'transparent',
width: '92%',
grid: {
top: fitChartSize(90),
bottom: '0',
left: '4%',
containLabel: true
},
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0096FF' // 0% 处的颜色
},
{
offset: 1,
color: '#004D88' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FFCB39' // 0% 处的颜色
},
{
offset: 1,
color: '#0A4190' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#9846FE' // 0% 处的颜色
},
{
offset: 1,
color: '#0A4190' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF5619' // 0% 处的颜色
},
{
offset: 1,
color: '#0A4190' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
],
legend: {
type: 'plain',
orient: 'horizontal',
right: fitChartSize(10),
top: fitChartSize(10),
bottom: fitChartSize(20),
itemWidth: 6,
itemHeight: 6
},
tooltip: {},
dataset: {
source: [
['product', '路段类型1', '路段类型2', '路段类型3', '路段类型4'],
['10:00', 399.3, 185.8, 293.7, 123],
['10:30', 83.1, 273.4, 455.1, 123],
['11:00', 86.4, 465.2, 382.5, 123],
['11:30', 72.4, 153.9, 439.1, 123],
['12:00', 72.4, 453.9, 239.1, 123],
['12:30', 72.4, 453.9, 239.1, 123],
['13:00', 86.4, 465.2, 282.5, 123],
['13:30', 72.4, 453.9, 239.1, 123],
['14:00', 72.4, 453.9, 239.1, 123],
['14:30', 72.4, 453.9, 239.1]
]
},
xAxis: {
type: 'category',
axisTisk: {
show: true,
// 设置刻度长度
length: 1,
lineStyle: {
type: 'dashed', // 设置为虚线
width: 0
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 500,
interval: 100,
axisLabel: {
fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
color: '#eee'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#00D0FF'
}
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar'
},
{
type: 'bar'
},
{
type: 'bar'
},
{
type: 'bar'
}
]
})
</script>
<style lang="scss" scoped>
.traffic-box-3 {
width: vw(818);
height: vh(480);
background: linear-gradient(330deg, #0B2F64 0%, #062B57 100%);
border-radius: 0px 0px 0px 0px;
padding: vw(10);
position: relative;
z-index: 9;
margin: 0 vw(10);
margin-top: vh(100);
.content-2{
margin-top:vh(20);
}
.content-1 {
.chart-item {
margin-top: vh(10);
height: vh(293);
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;
.traffic-box-3 {
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%);
.chart-box {
width: 100%;
height: vh(250);
}
.content-2 {
margin-top: vh(20);
}
.content-1 {
.chart-item {
margin-top: vh(10);
height: vh(293);
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;
.title-3 {
margin-left: vw(10);
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
.chart-box {
width: 100%;
height: vh(250);
}
&>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;
/* 兼容其他浏览器 */
}
}
}
.title-3 {
margin-left: vw(10);
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
.title-num {
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;
& > 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;
/* 兼容其他浏览器 */
}
}
}
.item-box {
flex: 1;
.title-num {
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;
.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);
.item-box {
flex: 1;
img {
margin-right: vw(5);
width: vw(8);
height: vh(8);
}
.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);
height: vh(8);
}
}
.item-num {
width: vw(134);
height: vh(30);
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
color: #02F9FA;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: vw(15);
position: relative;
left: vw(-8);
.item-num {
width: vw(134);
height: vh(30);
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: vw(15);
position: relative;
left: vw(-8);
span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}
}
span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}
}
.tp-title {
display: flex;
align-items: center;
.tp-title {
height: vh(72);
display: flex;
align-items: center;
.box-1 {
flex: 1;
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);
}
.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);
}
.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: vh(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)
}
.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%;
}
}
.item-bg-2 {
background-image: url('/src/assets/images/t-a-2.png');
background-size: 100% 100%;
}
}
.rt-text {
width: vw(116);
height: vh(40);
font-weight: 400;
font-size: vw(14);
color: #FFFFFF;
padding-left: vw(15);
text-align: left;
font-style: normal;
text-transform: none;
background-image: url('/src/assets/images/t-b-1.png');
background-size: 100% 100%;
line-height: vh(40);
padding-left: vw(40);
}
.rt-text-2{
background-image: url('/src/assets/images/t-b-2.png');
background-size: 100% 100%;
}
}
}
}
</style>
.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>