<template>
	<div class="traffic-box-3">
		<!-- 1 -->
		<div class="content-1">
			<div class="tp-title">
				<div class="box-1">
					<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="">
					<div class="xl-title">施家梁子大桥</div>
					<div class="tp-item">3号摄像机</div>
					<div class="tp-item item-bg-2">3号点位</div>
				</div>
				<div class="rt-text">严重拥堵</div>
			</div>
			<div class="title-num">
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">路段长度
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span> </div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">平均车速
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵距离
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵次数
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵开始时间
					</div>
					<div class="item-num"><span>12:00:00</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵持续时长
					</div>
					<div class="item-num"><span>1h30S</span></div>
				</div>
			</div>
			<!-- chart -->
			<div class="chart-item">
				<div class="title-3"><span>拥堵频次占比</span></div>
				<div class="chart-box">
					<v-chart class="chart" :option="option1" autoresize />
				</div>
			</div>
		</div>
		<!-- 2 -->
		<div class="content-1 content-2">
			<div class="tp-title">
				<div class="box-1">
					<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="">
					<div class="xl-title">施家梁子大桥</div>
					<div class="tp-item">3号摄像机</div>
					<div class="tp-item item-bg-2">3号点位</div>
				</div>
				<div class="rt-text rt-text-2">常规拥堵</div>
			</div>
			<div class="title-num">
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">路段长度
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span> </div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">平均车速
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵距离
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵次数
					</div>
					<div class="item-num"><span>
							<countup endVal="88895" />
						</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵开始时间
					</div>
					<div class="item-num"><span>12:00:00</span></div>
				</div>
				<div class="item-box">
					<div class="item-t flex">
						<img src="@/assets/images/t-icon-1.png" alt="">拥堵持续时长
					</div>
					<div class="item-num"><span>1h30S</span></div>
				</div>
			</div>
			<!-- chart -->
			<div class="chart-item">
				<div class="title-3"><span>拥堵频次占比</span></div>
				<div class="chart-box">
					<v-chart class="chart" :option="option1" autoresize />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import countup from 'vue-countup-v3'
	import * as echarts from 'echarts'
	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',
		width: '92%',
		// height: fitChartSize(300),
		grid: {
			top: fitChartSize(90),
			bottom: '0',
			left: '4%',
			containLabel: true,
		},
		color: [{
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
						offset: 0,
						color: '#0096FF' // 0% 处的颜色
					},
					{
						offset: 1,
						color: '#004D88' // 100% 处的颜色
					}
				],
				global: false // 缺省为 false
			},
			{
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: '#FFCB39' // 0% 处的颜色
				}, {
					offset: 1,
					color: '#0A4190' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			},
			{
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: '#9846FE' // 0% 处的颜色
				}, {
					offset: 1,
					color: '#0A4190' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			},
			{
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: '#FF5619' // 0% 处的颜色
				}, {
					offset: 1,
					color: '#0A4190' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			},
		],
		legend: {
			type: 'plain',
			orient: 'horizontal',
			right: fitChartSize(10),
			top: fitChartSize(10),
			bottom: fitChartSize(20),
			itemWidth: 6,
			itemHeight: 6,
		},
		tooltip: {},
		dataset: {
			source: [
				['product', '路段类型1', '路段类型2', '路段类型3', '路段类型4'],
				['10:00', 399.3, 185.8, 293.7, 123],
				['10:30', 83.1, 273.4, 455.1, 123],
				['11:00', 86.4, 465.2, 382.5, 123],
				['11:30', 72.4, 153.9, 439.1, 123],
				['12:00', 72.4, 453.9, 239.1, 123],
				['12:30', 72.4, 453.9, 239.1, 123],
				['13:00', 86.4, 465.2, 282.5, 123],
				['13:30', 72.4, 453.9, 239.1, 123],
				['14:00', 72.4, 453.9, 239.1, 123],
				['14:30', 72.4, 453.9, 239.1],
			]
		},
		xAxis: {
			type: 'category',
			axisTisk: {
				show: true,
				// 设置刻度长度
				length: 1,
				lineStyle: {
					type: 'dashed', // 设置为虚线
					width: 0,
				}
			},
		},
		yAxis: {
			type: 'value',
			min: 0,
			max: 500,
			interval: 100,
			axisLabel: {
				fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
				color: '#eee',
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dashed',
					color: '#00D0FF'
				}
			}
		},
		// Declare several bar series, each will be mapped
		// to a column of dataset.source by default.
		series: [{
				type: 'bar'
			}, {
				type: 'bar'
			}, {
				type: 'bar'
			},
			{
				type: 'bar'
			}
		]
	})
</script>

<style lang="scss" scoped>
	.traffic-box-3 {
		width: vw(818);
		height: vh(480);
		background: linear-gradient(330deg, #0B2F64 0%, #062B57 100%);
		border-radius: 0px 0px 0px 0px;
		padding: vw(10);
		position: relative;
		z-index: 9;
		margin: 0 vw(10);
		margin-top: vh(100);
		.content-2{
			margin-top:vh(20);
		}
		.content-1 {
			.chart-item {
				margin-top: vh(10);
				height: vh(293);
				background: radial-gradient(70% at 99% 50%, #0A4190 0%, rgba(0, 77, 136, 0.6) 100%);
				border-radius: 0px 0px 0px 0px;
				border: 1px solid;
				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;

				.chart-box {
					width: 100%;
					height: vh(250);
				}

				.title-3 {
					margin-left: vw(10);
					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;
						/* 兼容其他浏览器 */
					}
				}
			}

			.title-num {
				display: flex;
				justify-content: flex-start;
				padding: vw(20);
				background: radial-gradient(70% at 99% 50%, #0A4190 0%, rgba(0, 77, 136, 0.6) 100%);
				border-radius: 0px 0px 0px 0px;
				border: 1px solid;
				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;

				.item-box {
					flex: 1;

					.item-t {
						display: flex;
						font-weight: 400;
						font-size: vw(14);
						color: rgba(255, 255, 255, 0.8);
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-bottom: vh(20);

						img {
							margin-right: vw(5);
							width: vw(8);
							height: vh(8);
						}

					}

					.item-num {
						width: vw(134);
						height: vh(30);
						background-image: url('@/assets/images/t-box-title-bg-1.png');
						background-size: 100% 100%;
						font-weight: bold;
						font-size: vw(24);
						color: #02F9FA;
						text-align: left;
						font-style: normal;
						text-transform: none;
						padding-left: vw(15);
						position: relative;
						left: vw(-8);

						span {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.tp-title {
				display: flex;
				align-items: center;

				.box-1 {
					flex: 1;
					display: flex;
					align-items: center;

					.icon-xl {
						width: vw(30);
						height: vh(22);
						margin-right: vw(15);
					}

					.xl-title {
						font-size: vw(28);
						font-weight: bold;
						color: transparent;
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
						background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
						margin-right: vw(20);
					}

					.tp-item {
						width: vw(120);
						height: vh(72);
						background-image: url('/src/assets/images/t-a-1.png');
						background-size: 100% 100%;
						font-weight: 600;
						font-size: vw(15);
						color: #FFFFFF;
						padding-left: vw(42);
						text-align: left;
						font-style: normal;
						text-transform: none;
						display: flex;
						align-items: center;
						margin: 0 vw(20)
					}

					.item-bg-2 {
						background-image: url('/src/assets/images/t-a-2.png');
						background-size: 100% 100%;
					}
				}

				.rt-text {
					width: vw(116);
					height: vh(40);
					font-weight: 400;
					font-size: vw(14);
					color: #FFFFFF;
					padding-left: vw(15);
					text-align: left;
					font-style: normal;
					text-transform: none;
					background-image: url('/src/assets/images/t-b-1.png');
					background-size: 100% 100%;
					line-height: vh(40);
					padding-left: vw(40);
				}
				.rt-text-2{
					background-image: url('/src/assets/images/t-b-2.png');
					background-size: 100% 100%;
				}
			}
		}
	}
</style>