<template>
  <div class="box-2">
    <div class="header">
      <div class="title"> <span>交通信息</span>  </div>
    </div>
    <div class="flex pt-20 p-box">
      <div class="item core">
        <span class="title-1">全县景区数</span>
        <div class="flex align-end color1"> <countup endVal="895" /><span class="unit"></span></div>
      </div>
      <div class="item queue">
        <span class="title-1">核心景区数</span>
        <div class="flex align-end color2"> <countup endVal="895" /><span class="unit"></span></div>
      </div>
      <div class="item congestion">
        <span class="title-1">低感景区总数</span>
        <div class="flex align-end color3"> <countup endVal="895" /><span class="unit"></span></div>
      </div>
    </div>
	<div class="header">
	  <div class="title"> <span>景区信息</span> </div>
	</div>
	<div class="flex-four">
		<div class="item item1">
			<div class="box1">
				核心路段监控点位
				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
		<div class="item item2">
			<div class="box1">
				核心景区分析点位
				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
			
		</div>
		<div class="item item3">
			<div class="box1">
				异常点位
				<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
		<div class="item item4">
			<div class="box1">
				异常告警
				<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
		<div class="item item5">
			<div class="box1">
				已处理
				<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
	</div>
    <div class="flex pt-20 p-box">
      <div class="box">
        <div class="title-3"><span>异常告警</span></div>
        <div class="pt-20 chart-p">
			<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 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="header">
	  <div class="title"> <span>交通信息</span> </div>
	</div>
	<div class="flex-four">
		<div class="item item1">
			<div class="box1">
				核心路段监控点位
				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
		<div class="item item2">
			<div class="box1">
				核心景区分析点位
				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
			
		</div>
		<div class="item item3">
			<div class="box1">
				异常点位
				<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
		<div class="item item4">
			<div class="box1">
				异常告警
				<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
		<div class="item item5">
			<div class="box1">
				已处理
				<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
			</div>
		
		</div>
	</div>
	<div class="flex pt-20 p-box">
	  <div class="box">
	    <div class="title-3"><span>异常告警</span></div>
	    <div class="pt-20 chart-p">
	      <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 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>
</template>

<script setup>
  import * as echarts from 'echarts'
  import countup from 'vue-countup-v3'
  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,
    LegendComponent,
  } from 'echarts/components';
  import VChart, { THEME_KEY } from 'vue-echarts';
  import { ref, provide } from 'vue';
  
  use([
	LineChart,
    GaugeChart,
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
  ]);
  
  provide(THEME_KEY, 'dark');
  let selectSpot = ref('')
  const option1 = ref({
  	backgroundColor:'transparent',
	  tooltip: {
	    trigger: 'item'
	  },
	  legend: {
		type: 'scroll',
		orient: 'vertical',
		right: -10,
		top: 0,
		bottom: 20,
		itemWidth:5,
		itemHeight:5,
		textStyle:{
			fontSize:fitChartSize(12),
		}
	  },
  	  series: [
  	    {
  	      name: 'Access From',
  		  type: 'pie',
  		  left:-25,
  		  top:-20,
		  width:fitChartSize(230),
		  height:fitChartSize(230),
  		  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:'20',
		left:'4%',
		containLabel: true,
	  },
	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: 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,
			}
	      }
	    ]
	
  })
  onMounted(() => {})
</script>

<style scoped lang="scss">
	:deep(.el-select__wrapper){
		background:linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
		border:none;
		box-shadow:none;
		border-top-left-radius: vh(30);
		border-bottom-left-radius: vh(30);
		font-size:vw(14);
		color:#fff;
		
	}
	.line-chart{
		width:100%;
		height:vh(200);
	}
  .box-2 {
    margin-top: vh(120);
    width: vw(800);
    height: vh(950);
    padding: vw(8);
    box-sizing: border-box;
    // background-image: url('@/assets/images/bg-2.png');
    background-size: 100% 100%;
	.p-box{
		padding-top:vh(10);
		justify-content: space-between;
		.chart-p{
			position:relative;
			.check-box{
				position: absolute;
				right:vw(30);
				top:vh(10);
				width:vw(120);
				z-index: 19;
			}
		}
	}
	.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');
				}
			}
		}
	}
	.flex-four{
		display: flex;
		justify-content: center;
		align-items: center;
		.item{
			
			margin:vw(10);
			width:vw(142);
			height:vh(106);
			font-weight: 400;
			font-size: vw(14);
			color: rgba(255,255,255,0.9);
			line-height: 16px;
			text-align: center;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: center;
			align-items: center;
			padding:0;
			margin-top:0;
			.box1{
				width:vw(142);
			}
			.item-num{
				margin-top:vh(10);
			}
			.color1{
				color: #02F9FA;
			}
			.color2{
				color: #F15A25;
			}
			.color3{
				color: #E21B1B;
			}
			.color4{
				color: #12B5FD;
			}
			
		}
		.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');
		}
		.item4{
			background-image: url('/src/assets/images/four-t-3.png');
		}
		.item5{
			background-image: url('/src/assets/images/four-t-4.png');
		}
	}
    .header {
      position: relative;
      .title {
        margin: vh(5) auto;
        width: vw(468);
        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%;
		span{
			font-weight: 800;
			color: transparent;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
		}
      }
      .more {
        position: absolute;
        top: vh(0);
        right: vw(20);
        cursor: pointer;
        width: vw(60);
        height: vh(24);
        background-image: url('@/assets/images/more.png');
        background-size: 100% 100%;
      }
    }

    .item {
      position: relative;
      flex: 1;
      padding-left: vw(100);
	  width:vw(230);
      height: vh(70);
      display: flex;
      align-items: center;
      background-size: 100% 100%;
	  .align-end{
		  margin-top:vh(10);
	  }
	  .color1{
		  color: #12B5FD;
	  }
	  .color2{
		  color: #02F9FA;
	  }
	  .color3{
		  color: #F15A25;
	  }
	
    }
    .title-1 {
      position: absolute;
      top: vh(10);
      font-weight: 400;
      font-size: vw(14);
      color: rgba(255, 255, 255, 0.7);
    }
    .countup-wrap {
      
      font-size: vw(28);
      font-weight: bold;
    }
    .unit {
      color: #02f9fa;
      font-size: vw(14);
      margin-bottom: vh(4);
    }
    .core {
      background-image: url('@/assets/images/m-t-1.png');
	  background-size: 100% 100%;
    }
    .queue {
      background-image: url('@/assets/images/m-t-2.png');
	  background-size: 100% 100%;
    }
    .congestion {
      background-image: url('@/assets/images/m-t-2.png');
	  background-size: 100% 100%;
    }
    .box {
      width: vw(384);
      // height: vh(360);
      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; /* 兼容其他浏览器 */
        }
      }
    }
  }
</style>
