feat 交通大屏
This commit is contained in:
duanliang
BIN
src/assets/images/t-a-1.png
Normal file
BIN
src/assets/images/t-a-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/images/t-a-2.png
Normal file
BIN
src/assets/images/t-a-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
src/assets/images/t-b-1.png
Normal file
BIN
src/assets/images/t-b-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/images/t-b-2.png
Normal file
BIN
src/assets/images/t-b-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/images/work-icon-xl-1.png
Normal file
BIN
src/assets/images/work-icon-xl-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -11,7 +11,7 @@
|
|||||||
import box2 from './components/box-2.vue'
|
import box2 from './components/box-2.vue'
|
||||||
import box3 from './components/box-3.vue'
|
import box3 from './components/box-3.vue'
|
||||||
import box4 from './components/box-4.vue'
|
import box4 from './components/box-4.vue'
|
||||||
const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通',path: '/traffic' }]
|
const navLeft = [{ name: '安全',path: '/roadTesting' }, { name: '景区', path: '/scenic' }, { name: '交通',path: '/traffic' }]
|
||||||
const navRight = [
|
const navRight = [
|
||||||
{ name: '停车' },
|
{ name: '停车' },
|
||||||
{ name: '工单',path: '/workOrder' },
|
{ name: '工单',path: '/workOrder' },
|
||||||
|
|||||||
@@ -206,7 +206,7 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding:0 vw(10);
|
padding:0 vw(10);
|
||||||
.item-li{
|
.item-li{
|
||||||
width: vw(394);
|
width: vw(388);
|
||||||
height: vh(420);
|
height: vh(420);
|
||||||
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
||||||
border-radius: 0px 0px 0px 0px;
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
|||||||
@@ -1,14 +1,469 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="traffic-box-3">
|
<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">严重拥堵</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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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';
|
||||||
|
|
||||||
|
provide(THEME_KEY, 'dark');
|
||||||
|
const option1 = ref({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
height: fitChartSize(230),
|
||||||
|
width: '92%',
|
||||||
|
grid: {
|
||||||
|
top: '50',
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.traffic-box-3{
|
.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(10);
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
|
||||||
|
.chart-box {
|
||||||
|
width: 100%;
|
||||||
|
height: vh(250);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
|
||||||
|
&>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-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-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);
|
||||||
|
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);
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
top: vh(-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tp-title {
|
||||||
|
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: 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)
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -2,7 +2,8 @@
|
|||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
<CoreVideo />
|
<CoreVideo />
|
||||||
<box1/>
|
<box1/>
|
||||||
<!-- <box2/> -->
|
<box2/>
|
||||||
|
<box3/>
|
||||||
<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||||
<Correspondence />
|
<Correspondence />
|
||||||
</main>
|
</main>
|
||||||
@@ -11,6 +12,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import box1 from './components/box-1.vue'
|
import box1 from './components/box-1.vue'
|
||||||
import box2 from './components/box-2.vue'
|
import box2 from './components/box-2.vue'
|
||||||
|
import box3 from './components/box-3.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Reference in New Issue
Block a user