lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of 1ihldi8qxdvv.angerl.cn:fengjie/fengjie-datascreen

Browse Source
This commit is contained in:
zjc
2024-12-26 18:31:10 +08:00
parent dc1ad009c7 a061201a1c
commit c145b856d1
4 changed files with 89 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/testing/components/box-5.vue
View File

@@ -106,8 +106,6 @@
top:0,
width:fitChartSize(250),
height:fitChartSize(250),
// width:200,
// height:200,
radius: ['40%', '50%'],
avoidLabelOverlap: false,
padAngle: 5,
@@ -143,7 +141,9 @@
],
});
const optionLine = ref({
backgroundColor:'transparent',
grid:{
top:'50',
bottom:'50',
@@ -246,6 +246,10 @@
bottom: 20,
itemWidth:5,
itemHeight:5,
textStyle:{
fontSize:fitChartSize(12),
}
},
grid: {
left: '3%',
@@ -287,7 +291,6 @@
min:0,
max:45,
interval:15,
axisLabel: {
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
color: 'rgba(255,255,255,0.9)',
@@ -304,7 +307,6 @@
}
],
series: [
{
itemStyle: {
// 设置柱状图颜色

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

@@ -1,19 +1,36 @@
<template>
<div class="traffic-box-2">
<div class="map-box">
<Map></Map>
<!-- 视频 -->
<div class="video-list">
<div class="li">
<vue3VideoPlay v-bind="options"/>
<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>
<div class="li">
<vue3VideoPlay v-bind="options"/>
</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>
<div class="menu">查看更多</div>
</div>
</div>
</div>
</template>
<script setup>
@@ -48,14 +65,60 @@
</script>
<style lang="scss" scoped>
.n-box-traffic{
display: flex;
margin-top:vh(100);
}
.left-nav{
margin-left:vw(10);
// margin-top:vh(35);
// width:vw(250);
.top-box{
text-align: left;
font-weight: 400;
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);
}
}
}
}
.traffic-box-2{
width:vw(1517);
height:vh(965);
width:vw(1390);
height:vh(975);
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);
margin-right:0;
position:relative;
z-index:9;
.map-box{

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

@@ -151,10 +151,10 @@
provide(THEME_KEY, 'dark');
const option1 = ref({
backgroundColor: 'transparent',
height: fitChartSize(230),
width: '92%',
// height: fitChartSize(300),
grid: {
top: '50',
top: fitChartSize(90),
bottom: '0',
left: '4%',
containLabel: true,
@@ -304,7 +304,7 @@
margin: 0 vw(10);
margin-top: vh(100);
.content-2{
margin-top:vh(10);
margin-top:vh(20);
}
.content-1 {
.chart-item {
@@ -392,8 +392,9 @@
left: vw(-8);
span {
position: relative;
top: vh(-5);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}