feat 监控大屏、安全检测

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

@@ -61,7 +61,6 @@
       <div class="box">
         <div class="title-3"><span>异常告警</span></div>
         <div class="pt-20">
-          <!-- <Line :width="370" :height="180" id="line" /> -->
 		  <v-chart class="line-chart" :option="optionLine" autoresize />
         </div>
       </div>
@@ -151,14 +150,14 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts/core';
+  import * as echarts from 'echarts'
   import countup from 'vue-countup-v3'
-  import gauge from './gauge.vue'
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
   import { GaugeChart } from 'echarts/charts';
   import { PieChart } from 'echarts/charts';
   import { LineChart } from 'echarts/charts';
+  import { fitChartSize } from '@/utils/dataUtil'
   import {
     TitleComponent,
     TooltipComponent,
@@ -186,20 +185,23 @@
 	  legend: {
 		type: 'scroll',
 		orient: 'vertical',
-		right: 0,
+		right: -10,
 		top: 0,
 		bottom: 20,
 		itemWidth:5,
 		itemHeight:5,
+		textStyle:{
+			fontSize:fitChartSize(12),
+		}
 	  },
   	  series: [
   	    {
   	      name: 'Access From',
   		  type: 'pie',
-  		  left:-70,
-  		  top:-30,
-		  // width:200,
-		  // height:200,
+  		  left:-25,
+  		  top:-20,
+		  width:fitChartSize(230),
+		  height:fitChartSize(230),
   		  radius: ['40%', '50%'],
   		  avoidLabelOverlap: false,
   		  padAngle: 5,
@@ -213,7 +215,7 @@
 		  emphasis: {
 			label: {
 				show: true,
-				fontSize: 10,
+				fontSize: fitChartSize(10),
 				fontWeight: 'bold',
 				color:'#fff'
 			  }
@@ -242,38 +244,38 @@
 		left:'4%',
 		containLabel: true,
 	  },
-	    xAxis: {
-		  nameLocation: 'middle',
-	      type: 'category',
-		  boundaryGap: false,
-		  axisLabel: {
-			  fontSize:10,
-			  interval: 0, // 显示所有标签
-			  rotate: 0, // 旋转标签45度
-		  },
-	      data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
-		  axisTisk:{
-			show: true,
-			// 设置刻度长度
-			length: 1,
-			lineStyle: {
-				type: 'dashed' ,// 设置为虚线
-				width:0,
-			} 
-		  },
-		  axisLine: {
-			lineStyle: {
-				color: '#0096FF' // 设置横线颜色
-			}
-		  }
-	    },
+	xAxis: {
+	  nameLocation: 'middle',
+	  type: 'category',
+	  boundaryGap: false,
+	  axisLabel: {
+		  fontSize:fitChartSize(10),
+		  interval: 0, // 显示所有标签
+		  rotate: 0, // 旋转标签45度
+	  },
+	  data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+	  axisTisk:{
+		show: true,
+		// 设置刻度长度
+		length: 1,
+		lineStyle: {
+			type: 'dashed' ,// 设置为虚线
+			width:0,
+		} 
+	  },
+	  axisLine: {
+		lineStyle: {
+			color: '#0096FF' // 设置横线颜色
+		}
+	  }
+	},
 	    yAxis: {
 	      type: 'value',
 		  min:0,
 		  max:45,
 		  interval:15,
 		   axisLabel: {
-			  fontSize: 12 ,// 设置Y轴刻度字体大小
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
 			  color: 'rgba(255,255,255,0.9)',
 		   },
 		   splitLine:{
@@ -448,6 +450,7 @@
 		}
 		.item1,.item2{
 			background-image: url('/src/assets/images/four-t-1.png');
+			background-size: 100% 100%;
 		}
 		.item3{
 			background-image: url('/src/assets/images/four-t-2.png');
@@ -528,15 +531,15 @@
     }
     .core {
       background-image: url('@/assets/images/m-t-1.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
     }
     .queue {
       background-image: url('@/assets/images/m-t-2.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
     }
     .congestion {
       background-image: url('@/assets/images/m-t-2.png');
-	  background-size: contain;
+	  background-size: 100% 100%;
     }
     .box {
       width: vw(384);