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

src/components/navLeft/index.vue

@@ -43,7 +43,7 @@
 				</div>
 				<div class="tree-a">
 					<span class="name-1">其他</span>
-					<div class="tree-b" v-if="false">
+					<div class="tree-b" v-if="true">
 						<span class="name-2">摄像头1</span>
 						<span class="name-2 activee">摄像头1</span>
 						<span class="name-2">摄像头1</span>

src/views/testing/components/box-5.vue

@@ -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: {
 			  // 设置柱状图颜色

src/views/traffic/components/box-2.vue

@@ -1,6 +1,21 @@
 <template>
+	<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>
+		</div>
 		<div class="traffic-box-2">
 			<div class="map-box">
+				
 				<Map></Map>
 				<!-- 视频 -->
 				<div class="video-list">
@@ -14,6 +29,8 @@
 				</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);
+		width:vw(1390);
-		height:vh(965);
+		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{

src/views/traffic/components/box-3.vue

@@ -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;
+							position: absolute;
-							top: vh(-5);
+							top: 50%;
+							transform: translateY(-50%);
 						}
 					}
 				}