<template>
	<!-- 安全检测 -->
	<div class="box-detection">
		<!-- 地图 -->
		<div class="detection-top">
			<Map />
		</div>
		<div class="detection-bom flex">
			<!-- 数据 -->
			<div class="d-left">
				<div class="t-title">
					<span>监控点位统计</span>
				</div>
				<div class="t-census flex">
					<img class="t-icon" src="@/assets/images/t-ico-0.png" alt="" />
					<div class="item">
						监控点位 <div class="color1"><countup endVal="895" /></div>
					</div>
					<div class="item">
						核心点位 <div class="color1"><countup endVal="895" /></div>
					</div>
					<div class="item">
						拥堵次数 <div class="color2"><countup endVal="895" /></div>
					</div>
				</div>
				<div class="box">
				  <div class="title-3"><span>异常告警占比</span></div>
				  <div class="pt-20 h-flex">
				  	<div class="left">
				  		<v-chart class="chart" :option="option1" autoresize />
				  	</div>
				  <!-- 	<div class="right">
				  		<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
				  		<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
				  		<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
				  		<div class="li"><span class="rk-img" >1</span>核心监控1</div>
				  		<div class="li"><span class="rk-img" >1</span>核心监控1</div>
				  		<div class="li"><span class="rk-img" >1</span>核心监控</div>
				  	</div> -->
				  </div>
				</div>
			</div>
			<div class="d-right">
				<div class="t-title">
					<span>交通信息</span>
				</div>
				<div class="t-census flex">
					<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
					<div class="item">
						监控点位 <div class="color1 "><countup endVal="895" /></div>
					</div>
					<div class="item">
						核心点位 <div class="color1 "><countup endVal="895" /></div>
					</div>
					<div class="item">
						拥堵次数 <div class="color1 "><countup endVal="895" /></div>
					</div>
				</div>
				<div class="box">
				  <div class="title-3"><span>异常告警占比</span></div>
				  <div class="pt-20 chart-p">
					  <div class="check-label">
						  <span class="active">平均</span>
						  <span>最大</span>
						  <span>最小</span>
					  </div>
				    <!-- <div class="check-box">
				       <el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
				    	  <el-option label="餐厅名" value="1"></el-option>
				    	  <el-option label="订单号" value="2"></el-option>
				    	  <el-option label="用户电话" value="3"></el-option>
				    	</el-select>
				    </div> -->
				    <v-chart class="line-chart"  :option="optionLine" autoresize />
				  </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
  import * as echarts from 'echarts'
  import countup from 'vue-countup-v3'
  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: 20,
	  		bottom: 20,
	  		itemWidth:5,
	  		itemHeight:5,
	  		textStyle:{
	  			fontSize:fitChartSize(14),
	  		}
	  },
  	  series: [
  	    {
  	      name: 'Access From',
  		  type: 'pie',
  		  left:-30,
  		  top:-50,
		  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(10),
				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: '其他' },
  	      ]
  	     
  	    },
  	  ],
  });
  const optionLine = ref({
	  backgroundColor:'transparent',
	  grid:{
		top:'50',
		bottom:'50',
		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' // 设置横线颜色
			}
		  }
	    },
	    yAxis: {
	      type: 'value',
		  min:0,
		  max:45,
		  interval:15,
		   axisLabel: {
			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
			  color: 'rgba(255,255,255,0.9)',
		   },
		   splitLine:{
			   show:true,
			   lineStyle:{
				   type:'dashed',
				   color:'#00D0FF'
			   }
		   }
	    },
		
	    series: [
	      {
	        data: [0, 23, 30, 24, 40, 30, 45,26],
	        type: 'line',
	        smooth: true,
			label:{
				show:false,//隐藏坐标点
			},
			itemStyle:{
				color:'transparent'
			},
			markLine:{
				symbol:['none','none'],
				label:{show:false}
			},
			
			lineStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
				{
				  offset: 0,
				  color: '#7DE7FF'
				},
				{
				  offset: 0.5,
				  color: '#02F9FA'
				},
				{
				  offset: 1,
				  color: '#009DFF'
				},
			 ]),
			 width:3,
			}
	      }
	    ]
	
  })
  const optionBar = ref({
	  backgroundColor:'transparent',
	  tooltip: {
	      trigger: 'axis',
	      axisPointer: {
	        type: 'shadow'
	      }
	    },
	    legend: {
			// type: 'scroll',
			// orient: 'vertical',
			right: 0,
			top: 0,
			bottom: 20,
			itemWidth:5,
			itemHeight:5,
	    },
	    grid: {
	      left: '3%',
	      right: '4%',
	      bottom: '20%',
	      containLabel: true,
		  show:false,
	    },
	    xAxis: [
	      {
	        nameLocation: 'middle',
	        type: 'category',
	        boundaryGap: true,
	        axisLabel: {
			  fontSize:fitChartSize(10),
			  interval: 0, // 显示所有标签
			  rotate: 0, // 旋转标签45度
	        },
			minorTisk:{
				show:false,
			},
	        data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
			axisTisk:{
				alignWithLabel: true,
				show: false,
				// 设置刻度长度
				length: 0,
				lineStyle: {
					type: 'dashed' ,// 设置为虚线
					width:0,
				} 
			},
	      }
	    ],
	    yAxis: [
	      {
			  
	        type: 'value',
	        min:0,
	        max:45,
	        interval:15,
			
	         axisLabel: {
			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
			  color: 'rgba(255,255,255,0.9)',
			  offset:10,
	         },
	         splitLine:{
			   show:false,
			   lineStyle:{
				   type:'dashed',
				   color:'#00D0FF'
			   }
	         },
			
	      }
	    ],
	    series: [
		  
	      {
			itemStyle: {
			  // 设置柱状图颜色
			  color: '#0D53FF'
		    },
	        name: '三峡之巅',
	        type: 'bar',
	        stack: 'Ad',
	        emphasis: {
	          focus: 'series'
	        },
	        data: [10, 0, 16, 10, 22, 11, 9,30],
			barWidth: '45%', // 设置柱体粗细，可以是百分比或者像素值
	      },
	      {
	        name: '白帝城',
	        type: 'bar',
	        stack: 'Ad',
	        emphasis: {
	          focus: 'series'
	        },
			itemStyle: {
			  // 设置柱状图颜色
			  color: '#05FFB9'
			},
	        data: [20, 5, 14, 14, 0, 20, 11,2]
	      },
	      {
	        name: '龙河桥',
	        type: 'bar',
	        stack: 'Ad',
	        emphasis: {
	          focus: 'series'
	        },
			itemStyle: {
			  // 设置柱状图颜色
			  color: '#FFCB39'
			},
	        data: [15, 20, 8, 19, 20, 5, 22,13]
	      },
	      
	    ]
  })
  onMounted(() => {})
</script>
<style lang="scss" scoped>
	.line-chart{
		width:100%;
		height:vh(240);
	}
	.chart-p{
		position:relative;
		.check-label{
			position:absolute;
			right:vw(20);
			top:vh(15);
			span{
				min-width: vw(55);
				padding:vw(5);
				background: linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
				border-radius: vw(50);
				// border: 1px solid rgba(0,114,220,0.3);
				margin-left:vw(5);
				display: inline-block;
				font-weight: 400;
				font-size: vw(13);
				color: #0084FF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.active{
				background: linear-gradient( 270deg, #37D8FC 0%, #0084FF 100%);
				border-radius: vw(50);
				border: 1px solid rgba(0,114,220,0.3);
				color:#fff;
			}
		}
	}
	.box-detection{
		margin-top: vh(120);
		width:vw(820);
		height:vh(950);
		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 91%, rgba(5,40,79,0) 100%);
		border-radius: 0px 0px 0px 0px;
		.detection-top{
			width:100%;
			height:vh(580);
			background-color: #fff;
			.map-img{
				width:100%;
				height:100%;
			}
		}
		.detection-bom{
			justify-content: space-between;
			.d-left{
				width:vw(405);
				.left{
					width:100%;
					height:vh(240);
				}
			}
			.d-right{
				width:vw(405);
			}
			.box {
			  width:100%;
			  padding:vw(5);
			  margin-top:vh(5);
			  background-image: url('@/assets/images/bg-3.png');
			  background-size: 100% 100%;
			  &:nth-child(1) {
			    margin-right: vw(10);
			  }
			  .title-2 {
			    width: vw(253);
			    height: vh(28);
			    display: flex;
			    align-items: center;
			    background-image: url('@/assets/images/title-5.png');
			    background-size: 100% 100%;
			    & > span {
			      padding-left: vw(22);
			      font-weight: bold;
			      font-size: vw(15);
			      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
			      -webkit-background-clip: text;
			      background-clip: text;
			      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
			      color: transparent; /* 兼容其他浏览器 */
			    }
			  }
			  .statistic {
			    display: flex;
			    margin-top: vh(12);
			    width: 100%;
			    height: vh(88);
			    background-image: url('@/assets/images/bg-4.png');
			    background-size: 100% 100%;
			    &-item {
			      flex: 1;
			      display: flex;
			      flex-direction: column;
			      align-items: center;
			      justify-content: center;
			    }
			    &-title {
			      font-size: vw(14);
			      color: rgba(255, 255, 255, 0.9);
			    }
			    &-value {
			      margin-top: vh(10);
			      font-weight: bold;
			      font-size: vw(24);
			      color: #02f9fa;
			    }
			    .count {
			      font-weight: bold;
			      font-size: vw(28);
			      color: #ff4400 !important;
			    }
			    .prefix,
			    .suffix {
			      color: #ff4400;
			      font-size: vw(12);
			    }
			  }
			  .title-3 {
			    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; /* 兼容其他浏览器 */
			    }
			  }
			}
			.t-title {
			  margin: vh(10) auto;
			  width: 100%;
			  height: vh(32);
			  font-weight: 800;
			  font-size: vw(16);
			  color: #fff;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  background-image: url('@/assets/images/title-4.png');
			  background-size: 100% 100%;
			}
			.t-census{
				justify-content: center;
				align-items: center;
				background-image: url('@/assets/images/i-data-bg-1.png');
				background-size: 100% 100%;
				padding:vw(10);
				.t-icon{
					width:vw(45);
					height:vh(48);
				}
				.item{
					flex:1;
					font-weight: 400;
					font-size: vw(14);
					color: rgba(255,255,255,0.9);
					line-height: vh(16);
					text-align: center;
					font-style: normal;
					text-transform: none;
					.color1{
						display: block;
						font-weight: bold;
						font-size: vw(24);
						color: #FFFFFF;
						line-height: 28px;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
					.color2{
						display: block;
						font-weight: bold;
						font-size: vw(24);
						color: #F15A25;
						line-height: 28px;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
					.color3{
						display: block;
						font-weight: bold;
						font-size: vw(24);
						line-height: 28px;
						text-align: center;
						font-style: normal;
						text-transform: none;
						color:#A70000;
					}
				}
			}
		}
	}
	.h-flex{
		display: flex;
		justify-content: space-between;
		.left{
			flex:1;
			width:vw(260);
		}
		.right{
			margin-left:vw(20);
			width:vw(120);
			.li{
				position: relative;
				font-weight: 400;
				font-size: vw(14);
				color: #FFFFFF;
				line-height: 16px;
				text-align: left;
				font-style: normal;
				text-transform: none;
				position: relative;
				padding-left:vw(30);
				padding:0 vw(10);
				padding-left:vw(15);
				background: linear-gradient( 90deg, #1B5EC7 0%, rgba(27,94,199,0) 100%);
				border-radius: 0px 0px 0px 0px;
				height:vh(24);
				line-height:vh(24);
				margin-bottom:vh(8);
				// opacity: 0.4;
				.rk-img{
					position: absolute;
					width:vw(24);
					height:vh(24);
					line-height:vh(24);
					left:vw(-12);
					top:50%;
					display: block;
					background-image: url('/src/assets/images/rk-4.png');
					background-size: 100% 100%;
					transform: translateY(-50%);
					text-align: center;
				}
			}
			.li-1{
				background: linear-gradient( 90deg, #FFC10B 0%, rgba(255,209,44,0) 100%);
				.rk-img{
					background-image: url('/src/assets/images/rk-1.png');
				}
			}
			.li-2{
				background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
				.rk-img{
					background-image: url('/src/assets/images/rk-2.png');
				}
			}
			.li-3{
				background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
				.rk-img{
					background-image: url('/src/assets/images/rk-3.png');
				}
			}
		}
	}
	
</style>