<template>
	<div class="visualizing-demo1">
    <baidumap src="https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4"></baidumap>
    <baidumap src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></baidumap>
		<!-- 地图 -->
		<div ref="visualizingDemo1" style="height: 100%"></div>
		<div class="visualizing-container">
			<!-- 头部 -->
			<div class="visualizing-container-head">
				<div class="visualizing-container-head-left">
					<div class="visualizing-container-head-left-text">
						<div class="visualizing-container-head-left-text-box">{{ time.txt }}</div>
					</div>
				</div>
				<div class="visualizing-container-head-center">
					<div class="visualizing-container-head-center-box">
						<div class="visualizing-container-head-center-maintitle">深圳市xxx软件科技有限公司</div>
						<div class="visualizing-container-head-center-subtitle">旅游经济</div>
					</div>
				</div>
				<div class="visualizing-container-head-right">
					<div class="visualizing-container-head-right-text">
						<div class="visualizing-container-head-right-text-box">🌤 多云转晴东南风 26~30℃</div>
					</div>
				</div>
			</div>

			<!-- 图表左侧 -->
			<div class="visualizing-container-content-left">
				<div class="visualizing-container-content-left-flex">
					<div class="visualizing-container-title">
						<i class="el-icon-s-shop"></i>
						<span>产业概况</span>
					</div>
					<hr class="visualizing-container-title-colorful" />
					<div ref="visualizingContentLeftTop" style="height: 100%"></div>
				</div>
				<div class="visualizing-container-content-left-flex">
					<div class="visualizing-container-title">
						<i class="el-icon-s-promotion"></i>
						<span>A级风景区对比</span>
					</div>
					<hr class="visualizing-container-title-colorful" />
					<div ref="visualizingContentLeftBottom" style="height: 100%"></div>
				</div>
			</div>

			<!-- 图表中间 -->
			<div class="visualizing-container-content-center">
				<div class="visualizing-container-content-center-bottom">
					<div class="visualizing-container-content-center-bottom-flex">
						<div class="visualizing-container-title">
							<i class="el-icon-s-custom"></i>
							<span>游客过夜情况</span>
						</div>
						<hr class="visualizing-container-title-colorful" />
						<div ref="visualizingContentCenterTop" style="height: 100%"></div>
					</div>
					<div class="visualizing-container-content-center-bottom-flex">
						<div class="visualizing-container-title">
							<i class="el-icon-s-flag"></i>
							<span>游客驻留时长</span>
						</div>
						<hr class="visualizing-container-title-colorful" />
						<div ref="visualizingContentCenterBottom" style="height: 100%"></div>
					</div>
				</div>
			</div>

			<!-- 图表右侧 -->
			<div class="visualizing-container-content-right">
				<div class="visualizing-container-content-right-flex">
					<div class="visualizing-container-title">
						<i class="el-icon-s-marketing"></i>
						<span>当日游客趋势分析</span>
					</div>
					<hr class="visualizing-container-title-colorful" />
					<div ref="visualizingContentRightTop" style="height: 100%"></div>
				</div>
				<div class="visualizing-container-content-right-flex">
					<div class="visualizing-container-title">
						<i class="el-icon-s-data"></i>
						<span>当月游客趋势分析</span>
					</div>
					<hr class="visualizing-container-title-colorful" />
					<div ref="visualizingContentRightBottom" style="height: 100%"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
//说明：大屏需要引入百度地图api,我不想全局在index.html页面引入，但是使用vue render以组件方式引入后，
//报错了：Failed to execute 'write' on 'Document': It isn't possible to write into a document from an
// asynchronously-loaded external script unless it is explicitly opened.
//大意：文档流加载完毕，无法再通过write插入脚本。
//原因：百度地图api中有使用了document.write('<script src...'
//暂时未解决
import baidumap from '/@/views/demo/map2';
import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { echartsMapList, echartsMapData, echartsMapImgs } from './mock/demo1';

// 定义接口来定义对象的类型
interface Demo1State {
	visualizingDemo1: any;
	echartsMapList: any;
	echartsMapData: any;
	echartsMapImgs: any;
	time: any;
	myCharts: any[];
}

export default defineComponent({
	name: 'visualizingLinkDemo1',
  components:{baidumap},
	setup() {
		const { proxy } = <any>getCurrentInstance();
		const state = reactive<Demo1State>({
			visualizingDemo1: null,
			echartsMapList,
			echartsMapData,
			echartsMapImgs,
			time: {
				txt: '',
				fun: 0,
			},
			myCharts: [],
		});
		// 初始化时间
		const initTime = () => {
			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
			state.time.fun = window.setInterval(() => {
				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
			}, 1000);
		};
		// echartsMap 将坐标信息和对应物理量的值合在一起
		const convertData = (data: any) => {
			let res = [];
			for (let i = 0; i < data.length; i++) {
				let geoCoord = state.echartsMapData[data[i].name];
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value),
					});
				}
			}
			return res;
		};
		// 初始化 echartsMap（地图上的点）
		const initEchartsMap = () => {
			const myChart = echarts.init(<HTMLElement>state.visualizingDemo1);
			const option = {
				tooltip: {
					trigger: 'item',
					formatter(params: any) {
						// 自定义鼠标放入样式
						let item = state.echartsMapImgs.find((v: any) => v.name === params.name);
						let html = `<div style="width: 240px">
							<div style="display: flex; align-items: center">
								<img src="${item?.url}" style="width: 50px; height: 50px; border-radius: 100%; position: relative; border: 4px solid #ffffff; margin-left: -4px" />
								<div
									style="
										background: #51c1ff;
										width: 100%;
										height: 32px;
										margin-left: -14px;
										display: flex;
										align-items: center;
										padding-left: 20px;
										color: #fff;
									"
								>
									${item?.name}
								</div>
							</div>
							<div style="margin-top: 10px; font-size: 12px">
								<div style="width: 61px"><i class="el-icon-location-information" style="margin-right: 5px"></i>地址：</div>
								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.add}</div>
							</div>
							<div style="margin-top: 10px; font-size: 12px">
								<div style="width: 61px"><i class="el-icon-chat-dot-round" style="margin-right: 5px"></i>概括：</div>
								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.dec}</div>
							</div>
						</div>`;
						return html;
					},
				},
				color: ['#ea7ccc'],
				bmap: {
					center: [114.064524, 22.549225],
					zoom: 11,
					roam: true,
					mapStyle: {},
				},
				series: [
					{
						name: '门票收入',
						type: 'scatter',
						coordinateSystem: 'bmap',
						data: convertData(state.echartsMapList),
						symbolSize: function (val: any) {
							return val[2] / 10;
						},
						encode: {
							value: 2,
						},
						label: {
							formatter: '{b}',
							position: 'right',
							show: false,
						},
						emphasis: {
							label: {
								show: true,
							},
						},
					},
					{
						name: '门票收入',
						type: 'effectScatter',
						coordinateSystem: 'bmap',
						data: convertData(
							state.echartsMapList
								.sort(function (a: any, b: any) {
									return b.value - a.value;
								})
								.slice(0, 6)
						),
						symbolSize: function (val: any) {
							return val[2] / 10;
						},
						encode: {
							value: 2,
						},
						showEffectOn: 'render',
						rippleEffect: {
							brushType: 'stroke',
						},
						hoverAnimation: true,
						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
						},
						itemStyle: {
							shadowBlur: 100,
							shadowColor: '#333',
						},
						zlevel: 1,
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);

			// 地图
			const map = (<any>myChart).getModel().getComponent('bmap').getBMap();
			// BMAP_NORMAL_MAP ：此地图类型展示普通街道视图
			// BMAP_PERSPECTIVE_MAP ：此地图类型展示透视图像视图。（这个还不会用）
			// BMAP_SATELLITE_MAP：卫星地图 （没有坐标， 绿绿的一片的卫星地图）
			// BMAP_HYBRID_MAP：混合地图 （既有坐标，也是绿绿的一片的卫星地图）
			// eslint-disable-next-line no-undef
			map.setMapType(BMAP_SATELLITE_MAP);
			// eslint-disable-next-line no-undef
			let bdary = new BMap.Boundary();
			// 获取行政区域
			bdary.get('深圳', function (rs: any) {
				// 行政区域的点有多少个
				let count = rs.boundaries.length;
				for (let i = 0; i < count; i++) {
					// eslint-disable-next-line no-undef
					let ply = new BMap.Polygon(rs.boundaries[i], {
						// 设置多边形边线线粗
						strokeWeight: 4,
						// 设置多边形边线透明度0-1
						strokeOpacity: 1,
						// 设置多边形边线样式为实线或虚线，取值 solid 或 dashed
						StrokeStyle: 'dashed',
						// 设置多边形边线颜色
						strokeColor: '#febb50',
						// 设置多边形填充颜色
						fillColor: '',
					});
					// 建立多边形覆盖物
					// 添加覆盖物
					map.addOverlay(ply);
					// 调整视野
					map.setViewport(ply.getPath());
				}
				// 初始化地图，设置中心点坐标和地图级别
				// new BMap.Point('深圳市', 11)
				// eslint-disable-next-line no-undef
				map.centerAndZoom(new BMap.Point(114.064524, 22.549225), 11);
			});
		};
		// 产业概况
		const initVisualizingContentLeftTop = () => {
			const myChart = echarts.init(proxy.$refs.visualizingContentLeftTop);
			const option = {
				grid: {
					top: 50,
					right: 0,
					bottom: 50,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
					axisLine: {
						lineStyle: {
							color: 'rgba(22, 207, 208, 0.1)',
							width: 1,
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#16cfd0',
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '价格',
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
							},
						},
						axisLabel: {
							color: '#16cfd0',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.3)',
							},
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
				],
				series: [
					{
						name: '预购队列',
						type: 'line',
						data: [200, 85, 112, 275, 305, 415],
						itemStyle: {
							color: '#16cfd0',
						},
					},
					{
						name: '最新成交价',
						type: 'line',
						data: [50, 85, 22, 155, 170, 25],
						itemStyle: {
							color: '#febb50',
						},
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// A级风景区对比
		const initVisualizingContentLeftBottom = () => {
			const myChart = echarts.init(proxy.$refs.visualizingContentLeftBottom);
			const option = {
				grid: {
					top: 50,
					right: 10,
					bottom: 40,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['1月', '2月', '3月', '4月', '5月'],
					axisLine: {
						lineStyle: {
							color: 'rgba(22, 207, 208, 0.1)',
							width: 1,
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						interval: 0,
						color: '#16cfd0',
						textStyle: {
							fontSize: 10,
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '销量',
						axisLabel: {
							color: '#16cfd0',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.3)',
							},
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
				],
				series: [
					{
						name: '客流',
						type: 'line',
						stack: '总量',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(128, 255, 165)',
								},
								{
									offset: 1,
									color: 'rgba(1, 191, 236)',
								},
							]),
						},
						emphasis: {
							focus: 'series',
						},
						data: [140, 232, 101, 264, 90],
					},
					{
						name: '天数',
						type: 'line',
						stack: '总量',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(0, 221, 255)',
								},
								{
									offset: 1,
									color: 'rgba(77, 119, 255)',
								},
							]),
						},
						emphasis: {
							focus: 'series',
						},
						data: [120, 282, 111, 234, 220],
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 游客过夜情况
		const initVisualizingContentCenterTop = () => {
			const myChart = echarts.init(proxy.$refs.visualizingContentCenterTop);
			const min = 100;
			const max = 1000;
			const option = {
				grid: {
					top: 50,
					right: 10,
					bottom: 66,
					left: 38,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: [
					{
						type: 'category',
						data: ['地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区'],
						axisLabel: {
							color: '#16cfd0',
							textStyle: {
								fontSize: 9,
							},
							interval: 0,
							rotate: -45,
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
								width: 1,
							},
						},
						axisTick: {
							show: false,
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '天数',
						nameGap: 25,
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
							},
						},
						axisLabel: {
							color: '#16cfd0',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.3)',
							},
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
				],
				series: [
					{
						type: 'bar',
						barWidth: 15,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: '#de682e',
									},
									{
										offset: 1,
										color: '#ecc232',
									},
								]),
							},
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								formatter: function (param: any) {
									if (param.value == max || param.value == min) {
										return '';
									}
									return param.value;
								},
								textStyle: {
									color: 'rgba(22, 207, 208, 0.8)',
									fontSize: 10,
								},
							},
						},
						markPoint: {
							symbolSize: 30,
							label: {
								normal: {
									textStyle: {
										color: '#ffffff',
										fontSize: 10,
									},
								},
							},
							data: [
								{ name: '年最低', value: min, xAxis: 0, yAxis: 100 },
								{ name: '年最高', value: max, xAxis: 9, yAxis: 1000 },
							],
						},
						data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 游客驻留时长
		const initVisualizingContentCenterBottom = () => {
			const myChart = echarts.init(proxy.$refs.visualizingContentCenterBottom);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					top: 26,
					right: 10,
					bottom: 66,
					left: 45,
				},
				xAxis: {
					type: 'value',
					axisLabel: {
						color: '#16cfd0',
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(22, 207, 208, 0.3)',
						},
					},
				},
				yAxis: {
					type: 'category',
					axisLabel: {
						color: '#16cfd0',
					},
				},
				series: [
					{
						name: '已完成',
						type: 'bar',
						stack: 'total',
						label: {
							show: true,
						},
						emphasis: {
							focus: 'series',
						},
						barWidth: 12,
						itemStyle: {
							label: {
								show: true,
							},
							labelLine: {
								show: false,
							},
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{ offset: 0, color: 'rgba(7,165,255,0.2)' },
								{ offset: 1, color: 'rgba(7,165,255,1)' },
							]),
						},
					},
					{
						name: '进行中',
						type: 'bar',
						stack: 'total',
						label: {
							show: true,
						},
						emphasis: {
							focus: 'series',
						},
						barWidth: 12,
						itemStyle: {
							label: {
								show: true,
							},
							labelLine: {
								show: false,
							},
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{ offset: 0, color: 'rgba(41,244,236,0)' },
								{ offset: 1, color: 'rgba(41,244,236,1)' },
							]),
						},
					},
				],
				dataset: {
					source: [
						{ status: '已签收', value1: 33, value2: 93 },
						{ status: '配送中', value1: 53, value2: 32 },
						{ status: '已出库', value1: 78, value2: 65 },
						{ status: '采购中', value1: 12, value2: 35 },
						{ status: '接单中', value1: 90, value2: 52 },
					],
				},
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 当日游客趋势分析
		const initVisualizingContentRightTop = () => {
			const myChart = echarts.init(proxy.$refs.visualizingContentRightTop);
			const option = {
				grid: {
					top: 50,
					right: 30,
					bottom: 50,
					left: 20,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
					axisLine: {
						lineStyle: {
							color: 'rgba(22, 207, 208, 0.5)',
							width: 1,
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#16cfd0',
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '亿元',
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
							},
						},
						axisLabel: {
							color: '#16cfd0',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.3)',
							},
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
					{
						type: 'value',
						name: '同比',
						position: 'right',
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							formatter: '{value}%',
							textStyle: {
								color: '#16cfd0',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
				],
				series: [
					{
						name: '销售水量',
						type: 'line',
						yAxisIndex: 1,
						smooth: true,
						showAllSymbol: true,
						symbol: 'circle',
						itemStyle: {
							color: '#058cff',
						},
						lineStyle: {
							color: '#058cff',
						},
						areaStyle: {
							color: 'rgba(5,140,255, 0.2)',
						},
						data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
					},
					{
						name: '主营业务',
						type: 'bar',
						barWidth: 15,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: '#00FFE3',
									},
									{
										offset: 1,
										color: '#4693EC',
									},
								]),
							},
						},
						data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 当月游客趋势分析
		const initVisualizingContentRightBottom = () => {
			const myChart = echarts.init(proxy.$refs.visualizingContentRightBottom);
			const option = {
				grid: {
					top: 50,
					right: 10,
					bottom: 40,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
					axisLine: {
						lineStyle: {
							color: 'rgba(22, 207, 208, 0.1)',
							width: 1,
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#16cfd0',
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '人数(万)',
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
							},
						},
						axisLabel: {
							color: '#16cfd0',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.3)',
							},
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
				],
				series: [
					{
						name: '预购队列',
						type: 'line',
						data: [20, 15, 40, 55, 65, 85],
						smooth: true,
						itemStyle: {
							color: '#EA7CCC',
						},
					},
					{
						name: '最新成交价',
						type: 'line',
						data: [30, 45, 65, 85, 60, 105],
						smooth: true,
						itemStyle: {
							color: '#FAC958',
						},
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 批量设置 echarts resize
		const initEchartsResize = () => {
			window.addEventListener('resize', () => {
				for (let i = 0; i < state.myCharts.length; i++) {
					state.myCharts[i].resize();
				}
			});
		};
		// 页面加载时
		onMounted(async () => {
			NextLoading.done();
			initTime();
			await initEchartsMap();
			await initVisualizingContentLeftTop();
			await initVisualizingContentLeftBottom();
			await initVisualizingContentCenterTop();
			await initVisualizingContentCenterBottom();
			await initVisualizingContentRightTop();
			await initVisualizingContentRightBottom();
			await initEchartsResize();
		});
		// 页面卸载时
		onUnmounted(() => {
			window.clearInterval(state.time.fun);
		});
		return {
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
// 左右两侧图表宽度
$lrWidth: 288px;
// 中部图表高度
$cheight: 240px;
// 标题宽度
$titleWidth: 240px;
.visualizing-demo1 {
	height: 100%;
	width: 100%;
	position: relative;
	:deep(.BMap_cpyCtrl) {
		display: none;
	}
	:deep(.anchorBL) {
		display: none;
	}
	.visualizing-container {
		.visualizing-container-head {
			height: 60px;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			color: #ffffff;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.02));
			z-index: 3;
			.visualizing-container-head-left {
				flex: 1;
				position: relative;
				height: 60px;
				.visualizing-container-head-left-text {
					position: relative;
					z-index: 1;
					font-size: 12px;
					opacity: 0.6;
					width: 93%;
					padding-left: 15px;
					top: 50%;
					transform: translateY(-100%);
					.visualizing-container-head-left-text-box {
						width: 100%;
						position: relative;
						padding-left: 15px;
						&::after {
							content: '';
							height: 20px;
							width: 100%;
							position: absolute;
							background: linear-gradient(to right, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
							top: -1px;
							left: 0;
							transform: skew(30deg);
						}
					}
				}
				&::before,
				&::after {
					content: '';
					height: 3px;
					background: linear-gradient(-90deg, #16cfd0, transparent);
					position: absolute;
					width: 100%;
				}
				&::before {
					top: 1px;
					right: 33px;
					opacity: 0.8;
				}
				&::after {
					top: 41px;
					right: -2px;
				}
			}
			.visualizing-container-head-center {
				height: 60px;
				font-size: 18px;
				text-align: center;
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 0 60px;
				background: radial-gradient(rgba(0, 0, 0, 0.7) 5%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.02) 70%);
				.visualizing-container-head-center-box {
					margin: auto;
					position: relative;
					z-index: 1;
					.visualizing-container-head-center-maintitle {
						position: relative;
						&::before,
						&::after {
							content: '';
							position: absolute;
							min-width: 21%;
							height: 29px;
							top: 2px;
							opacity: 0.3;
							border-top: 1px solid #16cfd0;
						}
						&::before {
							left: -70px;
							border-right: 2px solid #16cfd0;
							transform: skew(50deg);
						}
						&::after {
							right: -70px;
							border-left: 2px solid #16cfd0;
							transform: skew(-50deg);
						}
					}
					.visualizing-container-head-center-subtitle {
						font-size: 14px;
						opacity: 0.8;
						position: relative;
						&::before,
						&::after {
							content: '';
							position: absolute;
							min-width: 35%;
							height: 23px;
							bottom: 8px;
							border-bottom: 2px solid #16cfd0;
						}
						&::before {
							transform: skew(50deg);
							left: -33px;
							border-left: 3px solid #16cfd0;
							border-image: linear-gradient(to right, #16cfd0, rgba(22, 207, 208, 0.02)) 1 10;
						}
						&::after {
							transform: skew(-50deg);
							right: -33px;
							border-right: 3px solid #16cfd0;
							border-image: linear-gradient(to left, rgba(22, 207, 208, 1), rgba(22, 207, 208, 0.02)) 1 10;
						}
					}
					&::before,
					&::after {
						content: '';
						position: absolute;
						width: 36px;
						height: 17px;
						top: -8px;
						border-bottom: 2px solid rgba(22, 207, 208, 0.7);
					}
					&::before {
						transform: skew(32deg);
						left: -89px;
						border-left: 3px solid rgba(22, 207, 208, 0.7);
					}
					&::after {
						transform: skew(-32deg);
						right: -89px;
						border-right: 3px solid rgba(22, 207, 208, 0.7);
					}
				}
				&::before,
				&::after {
					content: '';
					position: absolute;
					min-width: 50%;
					height: 15px;
					bottom: 0px;
					border-bottom: 4px solid #16cfd0;
				}
				&::before {
					transform: skew(60deg);
					left: 13px;
					border-left: 5px solid #16cfd0;
				}
				&::after {
					transform: skew(-60deg);
					right: 13px;
					border-right: 5px solid #16cfd0;
				}
			}
			.visualizing-container-head-right {
				flex: 1;
				position: relative;
				height: 60px;
				.visualizing-container-head-right-text {
					position: relative;
					z-index: 1;
					font-size: 12px;
					opacity: 0.6;
					width: 93%;
					float: right;
					text-align: right;
					padding-right: 15px;
					top: 50%;
					transform: translateY(-100%);
					.visualizing-container-head-right-text-box {
						width: 100%;
						position: relative;
						padding-right: 15px;
						&::after {
							content: '';
							height: 20px;
							width: 100%;
							position: absolute;
							background: linear-gradient(to left, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
							top: -1px;
							right: 0;
							transform: skew(-30deg);
						}
					}
				}
				&::before,
				&::after {
					content: '';
					height: 3px;
					background: linear-gradient(90deg, #16cfd0, transparent);
					position: absolute;
					width: 100%;
				}
				&::before {
					top: 1px;
					left: 33px;
					opacity: 0.8;
				}
				&::after {
					top: 41px;
					left: -2px;
				}
			}
		}
		.visualizing-container-title {
			max-width: $titleWidth;
			font-size: 14px;
			color: #ffffff;
			opacity: 0.8;
			padding: 0 5px;
			border-bottom: 1px solid #ffffff;
			border-image: linear-gradient(to right, #ffffff, rgba(22, 207, 208, 0.02)) 1 10;
			position: relative;
			i {
				padding-right: 5px;
				color: orange;
			}
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 1px;
				height: 10px;
				background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.5));
			}
		}
		.visualizing-container-title-colorful {
			max-width: $titleWidth;
			border: 0;
			padding: 1px;
			background: linear-gradient(135deg, red, orange, green, #16cfd0, purple);
			--mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 4px);
			-webkit-mask-image: var(--mask-image);
			mask-image: var(--mask-image);
		}
		.visualizing-container-content-left {
			width: $lrWidth;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
			padding-top: 60px;
			z-index: 2;
			.visualizing-container-content-left-flex {
				height: 50%;
				display: flex;
				flex-direction: column;
				padding-left: 15px;
			}
		}
		.visualizing-container-content-center {
			width: 100%;
			height: $cheight;
			position: absolute;
			bottom: 0;
			left: 0;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
			z-index: 1;
			.visualizing-container-content-center-bottom {
				width: calc(100% - #{$lrWidth * 2});
				height: $cheight;
				left: $lrWidth;
				bottom: 0;
				position: absolute;
				display: flex;
				padding: 0 15px;
				.visualizing-container-content-center-bottom-flex {
					width: 50%;
					padding: 0 15px;
				}
			}
		}
		.visualizing-container-content-right {
			width: $lrWidth;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			padding-top: 60px;
			background: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
			z-index: 2;
			.visualizing-container-content-right-flex {
				height: 50%;
				display: flex;
				flex-direction: column;
				padding-right: 15px;
			}
		}
	}
}
</style>
