feat 交通大屏
This commit is contained in:
duanliang
BIN
src/assets/images/t-box-title-bg-1.png
Normal file
BIN
src/assets/images/t-box-title-bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
src/assets/images/t-icon-1.png
Normal file
BIN
src/assets/images/t-icon-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 B |
205
src/components/monitor/index.vue
Normal file
205
src/components/monitor/index.vue
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<div class="video-box">
|
||||||
|
<div class="flex video-one-1" v-if="videoLog == 1">
|
||||||
|
<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
||||||
|
<vue3VideoPlay v-bind="options"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="video-live flex" v-if="videoLog==2">
|
||||||
|
<div class="video-lt v-error-bg">
|
||||||
|
<div class="desc">核心路段：这是一条信息说明</div>
|
||||||
|
<vue3VideoPlay v-bind="options"/>
|
||||||
|
</div>
|
||||||
|
<div class="video-rt">
|
||||||
|
<div class="title">
|
||||||
|
<span>最近联系</span>
|
||||||
|
</div>
|
||||||
|
<div class="rt-v-box">
|
||||||
|
<div class="rt-video v-error-bg" v-for="item in 8">
|
||||||
|
<div class="desc">核心路段：这是一条信息说明</div>
|
||||||
|
<vue3VideoPlay v-bind="options"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { fitChartSize } from '@/utils/dataUtil'
|
||||||
|
let searchValue = ref('')
|
||||||
|
const options = reactive({
|
||||||
|
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||||
|
type: 'm3u8', //视频类型
|
||||||
|
width:"100%",
|
||||||
|
height:"100%",
|
||||||
|
color: "#409eff", //主题色
|
||||||
|
title: "", //视频名称
|
||||||
|
muted: false, //静音
|
||||||
|
webFullScreen: false,
|
||||||
|
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||||
|
autoPlay: true, //自动播放
|
||||||
|
loop: false, //循环播放
|
||||||
|
mirror: false, //镜像画面
|
||||||
|
ligthOff: false, //关灯模式
|
||||||
|
volume: 0.3, //默认音量大小
|
||||||
|
control: true, //是否显示控制
|
||||||
|
controlBtns: [
|
||||||
|
// "audioTrack",
|
||||||
|
// "quality",
|
||||||
|
// "speedRate",
|
||||||
|
// "volume",
|
||||||
|
"setting",
|
||||||
|
"pip",
|
||||||
|
"pageFullScreen",
|
||||||
|
"fullScreen",
|
||||||
|
], //显示所有按钮,
|
||||||
|
});
|
||||||
|
const videoLog = ref(1)
|
||||||
|
const handleItemVideo = ()=>{
|
||||||
|
console.log('单击视频')
|
||||||
|
videoLog.value = 2
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.video-box{
|
||||||
|
flex:1;
|
||||||
|
display:flex;
|
||||||
|
.video-one-1{
|
||||||
|
background-image: url('/src/assets/images/log-v-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top:0;
|
||||||
|
padding:vh(30) vw(20);
|
||||||
|
margin-left:vw(20);
|
||||||
|
}
|
||||||
|
.video-live{
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left:vw(10) ;
|
||||||
|
.video-lt{
|
||||||
|
width:vw(1666);
|
||||||
|
height:vh(950);
|
||||||
|
background-image: url('/src/assets/images/one-video-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vh(40) vw(50);
|
||||||
|
position:relative;
|
||||||
|
.desc{
|
||||||
|
position:absolute;
|
||||||
|
// width:100%;
|
||||||
|
left:vw(50);
|
||||||
|
right:vw(50);
|
||||||
|
top:40(vh);
|
||||||
|
z-index: 9;
|
||||||
|
background: rgba(4,30,69,0.5);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding:vw(20);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.v-error-bg{
|
||||||
|
// background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
.desc{
|
||||||
|
background: rgba(226,27,27,0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-rt{
|
||||||
|
width:vw(400);
|
||||||
|
height:vh(950);
|
||||||
|
background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
border: 1px solid;
|
||||||
|
opacity: 0.4;
|
||||||
|
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||||
|
margin-left:vw(10);
|
||||||
|
padding:vw(20);
|
||||||
|
.rt-v-box{
|
||||||
|
overflow-y: auto;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-bottom:vh(10);
|
||||||
|
position:relative;
|
||||||
|
left:vw(-20);
|
||||||
|
span{
|
||||||
|
margin-left:vw(30);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: vw(15);
|
||||||
|
line-height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.rt-video{
|
||||||
|
width:100%;
|
||||||
|
height:vh(300);
|
||||||
|
background-image: url('/src/assets/images/v-item-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vw(20);
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom:vh(2);
|
||||||
|
position:relative;
|
||||||
|
.desc{
|
||||||
|
position:absolute;
|
||||||
|
width:100%;
|
||||||
|
left:0;
|
||||||
|
bottom:0;
|
||||||
|
z-index: 9;
|
||||||
|
background: rgba(4,30,69,0.5);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding:vw(20);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.v-error-bg{
|
||||||
|
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.desc{
|
||||||
|
background: rgba(226,27,27,0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.v-item{
|
||||||
|
width:vw(400);
|
||||||
|
height:vh(300);
|
||||||
|
background-image: url('/src/assets/images/v-item-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vw(20);
|
||||||
|
margin-right:vw(4);
|
||||||
|
margin-bottom:vh(4);
|
||||||
|
}
|
||||||
|
.v-error-bg{
|
||||||
|
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -27,6 +27,11 @@ const router = createRouter({
|
|||||||
path: '/scenic',
|
path: '/scenic',
|
||||||
name: 'scenic',
|
name: 'scenic',
|
||||||
component: () => import('@/views/scenic/index.vue')
|
component: () => import('@/views/scenic/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/traffic',
|
||||||
|
name: 'traffic',
|
||||||
|
component: () => import('@/views/traffic/index.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -4,227 +4,25 @@
|
|||||||
<navLeft></navLeft>
|
<navLeft></navLeft>
|
||||||
|
|
||||||
<!-- 视频 -->
|
<!-- 视频 -->
|
||||||
<div class="video-box">
|
<monitor></monitor>
|
||||||
<div class="flex video-one-1" v-if="videoLog == 1">
|
|
||||||
<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
|
||||||
<vue3VideoPlay v-bind="options"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="video-live flex" v-if="videoLog==2">
|
|
||||||
<div class="video-lt v-error-bg">
|
|
||||||
<div class="desc">核心路段：这是一条信息说明</div>
|
|
||||||
<vue3VideoPlay v-bind="options"/>
|
|
||||||
</div>
|
|
||||||
<div class="video-rt">
|
|
||||||
<div class="title">
|
|
||||||
<span>最近联系</span>
|
|
||||||
</div>
|
|
||||||
<div class="rt-v-box">
|
|
||||||
<div class="rt-video v-error-bg" v-for="item in 8">
|
|
||||||
<div class="desc">核心路段：这是一条信息说明</div>
|
|
||||||
<vue3VideoPlay v-bind="options"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { fitChartSize } from '@/utils/dataUtil'
|
import { fitChartSize } from '@/utils/dataUtil'
|
||||||
import navLeft from '@/components/navLeft/index.vue'
|
import navLeft from '@/components/navLeft/index.vue'
|
||||||
let searchValue = ref('')
|
import monitor from '@/components/monitor/index.vue'
|
||||||
const options = reactive({
|
|
||||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
|
||||||
type: 'm3u8', //视频类型
|
|
||||||
width:"100%",
|
|
||||||
height:"100%",
|
|
||||||
color: "#409eff", //主题色
|
|
||||||
title: "", //视频名称
|
|
||||||
muted: false, //静音
|
|
||||||
webFullScreen: false,
|
|
||||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
|
||||||
autoPlay: true, //自动播放
|
|
||||||
loop: false, //循环播放
|
|
||||||
mirror: false, //镜像画面
|
|
||||||
ligthOff: false, //关灯模式
|
|
||||||
volume: 0.3, //默认音量大小
|
|
||||||
control: true, //是否显示控制
|
|
||||||
controlBtns: [
|
|
||||||
// "audioTrack",
|
|
||||||
// "quality",
|
|
||||||
// "speedRate",
|
|
||||||
// "volume",
|
|
||||||
"setting",
|
|
||||||
"pip",
|
|
||||||
"pageFullScreen",
|
|
||||||
"fullScreen",
|
|
||||||
], //显示所有按钮,
|
|
||||||
});
|
|
||||||
const videoLog = ref(1)
|
|
||||||
const handleItemVideo = ()=>{
|
|
||||||
console.log('单击视频')
|
|
||||||
videoLog.value = 2
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
//背景色设置为透明
|
|
||||||
:deep(.el-input__wrapper){
|
|
||||||
background-color:rgba(0,0,0,0);
|
|
||||||
border:none;
|
|
||||||
box-shadow:none;
|
|
||||||
}
|
|
||||||
//输入框颜色
|
|
||||||
:deep(.el-input__inner) {
|
|
||||||
background-color: rgba(0, 0, 0, 0) !important;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.box-3-content{
|
.box-3-content{
|
||||||
width:vw(2356);
|
width:vw(2356);
|
||||||
height:vh(965);
|
height:vh(965);
|
||||||
|
|
||||||
margin-top: vh(120);
|
margin-top: vh(120);
|
||||||
display: flex;
|
display: flex;
|
||||||
.video-box{
|
|
||||||
flex:1;
|
|
||||||
display:flex;
|
|
||||||
.video-one-1{
|
|
||||||
background-image: url('/src/assets/images/log-v-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding-top:0;
|
|
||||||
padding:vh(30) vw(20);
|
|
||||||
margin-left:vw(20);
|
|
||||||
}
|
|
||||||
.video-live{
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-left:vw(10) ;
|
|
||||||
.video-lt{
|
|
||||||
width:vw(1666);
|
|
||||||
height:vh(950);
|
|
||||||
background-image: url('/src/assets/images/one-video-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding:vh(40) vw(50);
|
|
||||||
position:relative;
|
|
||||||
.desc{
|
|
||||||
position:absolute;
|
|
||||||
// width:100%;
|
|
||||||
left:vw(50);
|
|
||||||
right:vw(50);
|
|
||||||
top:40(vh);
|
|
||||||
z-index: 9;
|
|
||||||
background: rgba(4,30,69,0.5);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding:vw(20);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-error-bg{
|
|
||||||
// background-image: url('/src/assets/images/v-item-bg-1.png');
|
|
||||||
// background-size: 100% 100%;
|
|
||||||
.desc{
|
|
||||||
background: rgba(226,27,27,0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.video-rt{
|
|
||||||
width:vw(400);
|
|
||||||
height:vh(950);
|
|
||||||
background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
border: 1px solid;
|
|
||||||
opacity: 0.4;
|
|
||||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
|
||||||
margin-left:vw(10);
|
|
||||||
padding:vw(20);
|
|
||||||
.rt-v-box{
|
|
||||||
overflow-y: auto;
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-bottom:vh(10);
|
|
||||||
position:relative;
|
|
||||||
left:vw(-20);
|
|
||||||
span{
|
|
||||||
margin-left:vw(30);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(15);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.rt-video{
|
|
||||||
width:100%;
|
|
||||||
height:vh(300);
|
|
||||||
background-image: url('/src/assets/images/v-item-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding:vw(20);
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom:vh(2);
|
|
||||||
position:relative;
|
|
||||||
.desc{
|
|
||||||
position:absolute;
|
|
||||||
width:100%;
|
|
||||||
left:0;
|
|
||||||
bottom:0;
|
|
||||||
z-index: 9;
|
|
||||||
background: rgba(4,30,69,0.5);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding:vw(20);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-error-bg{
|
|
||||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.desc{
|
|
||||||
background: rgba(226,27,27,0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-item{
|
|
||||||
width:vw(400);
|
|
||||||
height:vh(300);
|
|
||||||
background-image: url('/src/assets/images/v-item-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding:vw(20);
|
|
||||||
margin-right:vw(4);
|
|
||||||
margin-bottom:vh(4);
|
|
||||||
}
|
|
||||||
.v-error-bg{
|
|
||||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -54,67 +54,5 @@
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #0a254b;
|
background-color: #0a254b;
|
||||||
|
|
||||||
.header {
|
|
||||||
position: absolute;
|
|
||||||
left: vw(326);
|
|
||||||
|
|
||||||
.title {
|
|
||||||
width: vw(3133);
|
|
||||||
height: vh(120);
|
|
||||||
font-size: vw(48);
|
|
||||||
font-weight: 800;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: vh(20);
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: vw(10);
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
|
||||||
background-image: url('@/assets/images/title.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
position: absolute;
|
|
||||||
left: vw(380);
|
|
||||||
top: vh(34);
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: vh(-10);
|
|
||||||
width: vw(210);
|
|
||||||
height: vh(56);
|
|
||||||
padding-top: vh(10);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: vw(28);
|
|
||||||
text-align: center;
|
|
||||||
color: rgba(208, 236, 255, 0.9);
|
|
||||||
background-image: url('@/assets/images/title-2.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-right {
|
|
||||||
position: absolute;
|
|
||||||
right: vw(424);
|
|
||||||
top: vh(34);
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: vh(-10);
|
|
||||||
width: vw(210);
|
|
||||||
height: vh(56);
|
|
||||||
padding-top: vh(10);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: vw(28);
|
|
||||||
text-align: center;
|
|
||||||
color: rgba(208, 236, 255, 0.9);
|
|
||||||
background-image: url('@/assets/images/title-3.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -4,72 +4,13 @@
|
|||||||
<navLeft></navLeft>
|
<navLeft></navLeft>
|
||||||
|
|
||||||
<!-- 视频 -->
|
<!-- 视频 -->
|
||||||
<div class="video-box">
|
<monitor></monitor>
|
||||||
<div class="flex video-one-1" v-if="videoLog == 1">
|
|
||||||
<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
|
||||||
<vue3VideoPlay v-bind="options"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="video-live flex" v-if="videoLog == 2">
|
|
||||||
<div class="video-lt v-error-bg">
|
|
||||||
<div class="desc">核心路段：这是一条信息说明</div>
|
|
||||||
<vue3VideoPlay v-bind="options"/>
|
|
||||||
</div>
|
|
||||||
<div class="video-rt">
|
|
||||||
<div class="title">
|
|
||||||
<span>最近联系</span>
|
|
||||||
</div>
|
|
||||||
<div class="rt-v-box">
|
|
||||||
<div class="rt-video v-error-bg" v-for="item in 8">
|
|
||||||
<div class="desc">核心路段：这是一条信息说明</div>
|
|
||||||
<vue3VideoPlay v-bind="options"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { fitChartSize } from '@/utils/dataUtil'
|
|
||||||
import navLeft from '@/components/navLeft/index.vue'
|
import navLeft from '@/components/navLeft/index.vue'
|
||||||
const options = reactive({
|
import monitor from '@/components/monitor/index.vue'
|
||||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
|
||||||
type: 'm3u8', //视频类型
|
|
||||||
width:"100%",
|
|
||||||
height:"100%",
|
|
||||||
color: "#409eff", //主题色
|
|
||||||
title: "", //视频名称
|
|
||||||
muted: false, //静音
|
|
||||||
webFullScreen: false,
|
|
||||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
|
||||||
autoPlay: true, //自动播放
|
|
||||||
loop: false, //循环播放
|
|
||||||
mirror: false, //镜像画面
|
|
||||||
ligthOff: false, //关灯模式
|
|
||||||
volume: 0.3, //默认音量大小
|
|
||||||
control: true, //是否显示控制
|
|
||||||
controlBtns: [
|
|
||||||
// "audioTrack",
|
|
||||||
// "quality",
|
|
||||||
// "speedRate",
|
|
||||||
// "volume",
|
|
||||||
"setting",
|
|
||||||
"pip",
|
|
||||||
"pageFullScreen",
|
|
||||||
"fullScreen",
|
|
||||||
], //显示所有按钮,
|
|
||||||
});
|
|
||||||
const videoLog = ref(1)
|
|
||||||
const handleItemVideo = ()=>{
|
|
||||||
console.log('单击视频')
|
|
||||||
videoLog.value = 2
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box-3-content{
|
.box-3-content{
|
||||||
@@ -79,139 +20,6 @@
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-top: vh(120);
|
margin-top: vh(120);
|
||||||
display: flex;
|
display: flex;
|
||||||
.video-box{
|
|
||||||
flex:1;
|
|
||||||
// padding:vh(40) vw(20);
|
|
||||||
display:flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding-top:0;
|
|
||||||
// margin-left:vw(20);
|
|
||||||
.video-one-1{
|
|
||||||
background-image: url('/src/assets/images/log-v-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding-top:0;
|
|
||||||
padding:vh(30) vw(20);
|
|
||||||
margin-left:vw(20);
|
|
||||||
}
|
|
||||||
.video-live{
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-left:vw(10) ;
|
|
||||||
.video-lt{
|
|
||||||
width:vw(1666);
|
|
||||||
height:vh(950);
|
|
||||||
background-image: url('/src/assets/images/one-video-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding:vh(40) vw(50);
|
|
||||||
position:relative;
|
|
||||||
.desc{
|
|
||||||
position:absolute;
|
|
||||||
// width:100%;
|
|
||||||
left:vw(50);
|
|
||||||
right:vw(50);
|
|
||||||
top:40(vh);
|
|
||||||
z-index: 9;
|
|
||||||
background: rgba(4,30,69,0.5);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding:vw(20);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-error-bg{
|
|
||||||
// background-image: url('/src/assets/images/v-item-bg-1.png');
|
|
||||||
// background-size: 100% 100%;
|
|
||||||
.desc{
|
|
||||||
background: rgba(226,27,27,0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.video-rt{
|
|
||||||
width:vw(400);
|
|
||||||
height:vh(950);
|
|
||||||
background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
border: 1px solid;
|
|
||||||
opacity: 0.4;
|
|
||||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
|
||||||
margin-left:vw(10);
|
|
||||||
padding:vw(20);
|
|
||||||
.rt-v-box{
|
|
||||||
overflow-y: auto;
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-bottom:vh(10);
|
|
||||||
position:relative;
|
|
||||||
left:vw(-20);
|
|
||||||
span{
|
|
||||||
margin-left:vw(30);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: vw(15);
|
|
||||||
line-height: vh(26);
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.rt-video{
|
|
||||||
width:100%;
|
|
||||||
height:vh(300);
|
|
||||||
background-image: url('/src/assets/images/v-item-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding:vw(20);
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom:vh(2);
|
|
||||||
position:relative;
|
|
||||||
.desc{
|
|
||||||
position:absolute;
|
|
||||||
width:100%;
|
|
||||||
left:0;
|
|
||||||
bottom:0;
|
|
||||||
z-index: 9;
|
|
||||||
background: rgba(4,30,69,0.5);
|
|
||||||
border-radius: 0px 0px 0px 0px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: vw(14);
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding:vw(20);
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-error-bg{
|
|
||||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.desc{
|
|
||||||
background: rgba(226,27,27,0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-item{
|
|
||||||
width:vw(400);
|
|
||||||
height:vh(300);
|
|
||||||
background-image: url('/src/assets/images/v-item-bg.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding:vw(20);
|
|
||||||
margin-right:vw(4);
|
|
||||||
margin-bottom:vh(4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
253
src/views/traffic/components/box-1.vue
Normal file
253
src/views/traffic/components/box-1.vue
Normal file
@@ -0,0 +1,253 @@
|
|||||||
|
<template>
|
||||||
|
<div class="traffic-box-1">
|
||||||
|
<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>
|
||||||
|
<div class="list-item">
|
||||||
|
<div class="item-li" v-for="item in 4">
|
||||||
|
<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';
|
||||||
|
|
||||||
|
provide(THEME_KEY, 'dark');
|
||||||
|
const option1 = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 10,
|
||||||
|
top: 70,
|
||||||
|
bottom: 20,
|
||||||
|
itemWidth:5,
|
||||||
|
itemHeight:5,
|
||||||
|
padding: [20,10,20,10],
|
||||||
|
// itemGap:15,
|
||||||
|
show:true,
|
||||||
|
lineStyle:{
|
||||||
|
borderColor:'#fff',
|
||||||
|
width:5,
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize:fitChartSize(16),
|
||||||
|
lineHeight: 16,
|
||||||
|
rich: {
|
||||||
|
d: {
|
||||||
|
width: '100%',
|
||||||
|
borderWidth: 0.5,
|
||||||
|
height:5,
|
||||||
|
backgroundColor: '1',
|
||||||
|
},
|
||||||
|
a: {
|
||||||
|
width: 75,
|
||||||
|
align: 'left',
|
||||||
|
fontSize:fitChartSize(16),
|
||||||
|
// backgroundColor:'1'
|
||||||
|
// color:'1',
|
||||||
|
// borderColor:'#eee',
|
||||||
|
// borderWidth:2
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: (e) => {
|
||||||
|
let ratio = 0
|
||||||
|
let value = 0
|
||||||
|
if (option1.value.series[0].data.length > 0) {
|
||||||
|
option1.value.series[0].data.forEach(item => {
|
||||||
|
if (e == item.name) {
|
||||||
|
ratio = (item.value*100/3799).toFixed(0)
|
||||||
|
value = item.value
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// return `${e} ${ratio}%
|
||||||
|
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
|
||||||
|
return arr.join('')
|
||||||
|
},
|
||||||
|
itemStyle:{
|
||||||
|
// color:'#fff'
|
||||||
|
|
||||||
|
},
|
||||||
|
backgroundColor:'rgba(0,77,136,0.6)'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
left:-50,
|
||||||
|
top:40,
|
||||||
|
width:fitChartSize(350),
|
||||||
|
height:fitChartSize(350),
|
||||||
|
// width:200,
|
||||||
|
// height:200,
|
||||||
|
radius: ['40%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center',
|
||||||
|
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: fitChartSize(16),
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 200, name: '异常状况1' },
|
||||||
|
{ value: 500, name: '异常状况2' },
|
||||||
|
{ value: 234, name: '异常状况3' },
|
||||||
|
{ value: 135, name: '异常状况4' },
|
||||||
|
{ value: 100, name: '异常状况5' },
|
||||||
|
{ value: 777, name: '异常状况6' },
|
||||||
|
{ value: 777, name: '其他' },
|
||||||
|
]
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.traffic-box-1{
|
||||||
|
width:vw(815);
|
||||||
|
height:vh(975);
|
||||||
|
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
margin-top:vh(100);
|
||||||
|
position: relative;
|
||||||
|
z-index: 9;
|
||||||
|
.list-item{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding:0 vw(10);
|
||||||
|
.item-li{
|
||||||
|
width: vw(394);
|
||||||
|
height: vh(420);
|
||||||
|
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%;
|
||||||
|
|
||||||
|
& > 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; /* 兼容其他浏览器 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart-box{
|
||||||
|
width:100%;
|
||||||
|
height:vh(370);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title-num{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding:vw(40);
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,7 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<main class="wrapper">
|
||||||
|
<CoreVideo />
|
||||||
|
<box1/>
|
||||||
|
<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||||
|
<Correspondence />
|
||||||
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
|
import box1 from './components/box-1.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Reference in New Issue
Block a user