feat 工单消息
This commit is contained in:
duanliang
@@ -55,9 +55,9 @@
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 70,
|
||||
bottom: 20,
|
||||
right: fitChartSize(10),
|
||||
top: fitChartSize(70),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
padding: [20,10,20,10],
|
||||
@@ -79,7 +79,7 @@
|
||||
backgroundColor: '1',
|
||||
},
|
||||
a: {
|
||||
width: 75,
|
||||
width: fitChartSize(75),
|
||||
align: 'left',
|
||||
fontSize:fitChartSize(16),
|
||||
// backgroundColor:'1'
|
||||
@@ -114,8 +114,8 @@
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:-50,
|
||||
top:40,
|
||||
left:fitChartSize(-50),
|
||||
top:fitChartSize(40),
|
||||
width:fitChartSize(350),
|
||||
height:fitChartSize(350),
|
||||
// width:200,
|
||||
@@ -129,14 +129,48 @@
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
|
||||
fontWeight: 'bold',
|
||||
// formatter: function (o) {
|
||||
// let data = o.data.value
|
||||
// return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
// },
|
||||
// rich: {
|
||||
|
||||
// value: {
|
||||
// color: '#fff',
|
||||
// fontSize: fitChartSize(24),
|
||||
// fontWeight: 'bold',
|
||||
// padding: [0, 0, 5, 0]
|
||||
// },
|
||||
// name: {
|
||||
// color: '#7894A8',
|
||||
// fontSize: fitChartSize(12)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: fitChartSize(16),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff'
|
||||
color:'#fff',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
let data = o.data.value
|
||||
return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
@@ -149,7 +183,7 @@
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 777, name: '其他' },
|
||||
{ value: 888, name: '其他' },
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
99
src/views/traffic/components/box-2.vue
Normal file
99
src/views/traffic/components/box-2.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Map from '@/components/Map/marker.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",
|
||||
], //显示所有按钮,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.traffic-box-2{
|
||||
width:vw(1517);
|
||||
height:vh(965);
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
margin:0 vw(10);
|
||||
padding:vh(35) vw(30);
|
||||
margin-top:vh(110);
|
||||
position:relative;
|
||||
z-index:9;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/views/traffic/components/box-3.vue
Normal file
14
src/views/traffic/components/box-3.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="traffic-box-3">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.traffic-box-3{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
<main class="wrapper">
|
||||
<CoreVideo />
|
||||
<box1/>
|
||||
<box2/>
|
||||
<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
|
||||
<Correspondence />
|
||||
</main>
|
||||
@@ -9,6 +10,7 @@
|
||||
|
||||
<script setup>
|
||||
import box1 from './components/box-1.vue'
|
||||
import box2 from './components/box-2.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user