PixelAI-admin/src/views/visualizing/demo2.vue

<template>
	<div class="visualizing-demo2">
		<!-- 顶部 -->
		<div class="big-data-up">
			<div class="up-left">
				<SvgIcon name="ele-Timer" class="mr5" />
				<span>{{ time.txt }}</span>
			</div>
			<div class="up-center">
				<span>智慧农业系统平台</span>
			</div>
			<div class="up-right">
				<el-dropdown size="small">
					<span class="el-dropdown-link">
						{{ dropdownActive }}
						<SvgIcon name="ele-ArrowDown" class="el-icon--right" />
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(v, k) in dropdownList" :key="k">{{ v.label }} </el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<div class="ml15">
					<SvgIcon name="ele-Bell" class="mr5" />
					<span>消息</span>
				</div>
				<div class="ml15">
					<SvgIcon name="ele-User" class="mr5" />
					<span>个人</span>
				</div>
				<div class="ml15">
					<SvgIcon name="ele-SwitchButton" class="mr5" />
					<span>返回</span>
				</div>
			</div>
		</div>

		<div class="big-data-down">
			<!-- 左边 -->
			<div class="big-data-down-left">
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">天气预报</div>
						<div class="flex-content flex-content-overflow">
							<div class="sky">
								<SvgIcon name="ele-Sunny" class="sky-left" />
								<div class="sky-center">
									<div class="mb2">
										<span class="font">多云转晴</span>
										<span class="font">东南风</span>
										<span>良</span>
									</div>
									<div class="sky-tip">温馨提示：多云转晴，南风转北风风力3级</div>
								</div>
								<div class="sky-right">
									<span>25</span>
									<span class="font">°C</span>
								</div>
							</div>
							<div class="sky-dd">
								<div class="sky-dl" v-for="(v, k) in skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
									<div>{{ v.v1 }}</div>
									<div v-if="v.type === 'title'">{{ v.v2 }}</div>
									<div v-else>
										<SvgIcon :name="v.v2" />
									</div>
									<div>{{ v.v3 }}</div>
									<div>{{ v.v4 }}</div>
									<div class="tip">{{ v.v5 }}</div>
									<div>{{ v.v6 }}</div>
									<div>{{ v.v7 }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">当前设备状态</div>
						<div class="flex-content flex-content-overflow">
							<div class="d-states">
								<div class="d-states-item">
									<SvgIcon name="ele-Odometer" class="i-bg1" />
									<div class="d-states-flex">
										<div class="d-states-item-label">园区设备数</div>
										<div class="d-states-item-value">99</div>
									</div>
								</div>
								<div class="d-states-item">
									<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
									<div class="d-states-flex">
										<div class="d-states-item-label">预警设备数</div>
										<div class="d-states-item-value">10</div>
									</div>
								</div>
								<div class="d-states-item">
									<SvgIcon name="ele-VideoPlay" class="i-bg3" />
									<div class="d-states-flex">
										<div class="d-states-item-label">运行设备数</div>
										<div class="d-states-item-value">20</div>
									</div>
								</div>
							</div>
							<div class="d-btn">
								<div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k" :class="{ 'd-btn-active': dBtnActive === k }">
									<SvgIcon name="ele-Money" class="d-btn-item-left" />
									<div class="d-btn-item-center">
										<div>{{ v.v1 }}</div>
										<div>{{ v.v2 }}|{{ v.v3 }}</div>
									</div>
									<div class="d-btn-item-eight">{{ v.v4 }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">近30天预警总数</div>
						<div class="flex-content" ref="rightChartData1"></div>
					</div>
				</div>
			</div>

			<!-- 中间 -->
			<div class="big-data-down-center">
				<div class="big-data-down-center-one">
					<div class="big-data-down-center-one-content" ref="rightChartData5">
						<div id="3DEarth"></div>
						<div :class="v.topLevelClass" v-for="(v, k) in earth3DBtnList" :key="k">
							<div class="circle" v-for="i in 4" :key="i"></div>
							<div class="text-box">
								<SvgIcon :name="v.icon" />
								<div class="text">{{ v.label }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="big-data-down-center-two">
					<div class="flex-warp-item-box">
						<div class="flex-title">
							<span>当前设备监测</span>
							<span class="flex-title-small">单位：次</span>
						</div>
						<div class="flex-content">
							<div class="flex-content-left">
								<div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
									<div class="monitor-wave" :class="{ 'monitor-active': k === chartData4Index }">
										<div class="monitor-z-index">
											<div class="monitor-item-label">{{ v.label }}</div>
										</div>
									</div>
								</div>
							</div>
							<div class="flex-content-right" ref="rightChartData4"></div>
						</div>
					</div>
				</div>
			</div>

			<!-- 右边 -->
			<div class="big-data-down-right">
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">
							<span>近7天产品追溯扫码统计</span>
							<span class="flex-title-small">单位：次</span>
						</div>
						<div class="flex-content" ref="rightChartData3"></div>
					</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">当前任务统计</div>
						<div class="flex-content">
							<div class="task">
								<div class="task-item task-first-item">
									<div class="task-item-value task-first">25</div>
									<div class="task-item-label">待办任务</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task1">
										<div class="task-item-value">12</div>
										<div class="task-item-label">施肥</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task2">
										<div class="task-item-value">3</div>
										<div class="task-item-label">施药</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task3">
										<div class="task-item-value">5</div>
										<div class="task-item-label">农事</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task4">
										<div class="task-item-value">3</div>
										<div class="task-item-label">巡园</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task5">
										<div class="task-item-value">2</div>
										<div class="task-item-label">采集</div>
									</div>
								</div>
							</div>
							<div ref="rightChartData6" class="progress"></div>
						</div>
					</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">
							<span>近7天投入品记录</span>
							<span class="flex-title-small">单位：件</span>
						</div>
						<div class="flex-content" ref="rightChartData2"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import { formatDate } from '/@/utils/formatTime';
import { dropdownList, skyList, dBtnList, earth3DBtnList, chartData4List } from './mock/demo2';
import worldImg from './images/world.jpg';
import bathymetryImg from './images/bathymetry.jpg';
export default defineComponent({
	name: 'visualizingLinkDemo2',
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const state = reactive({
			time: {
				txt: '',
				fun: 0,
			},
			dropdownList,
			dropdownActive: '请选择',
			skyList,
			dBtnList,
			chartData4Index: 0,
			dBtnActive: 0,
			earth3DBtnList,
			chartData4List,
			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);
		};
		// 近30天预警总数
		const initRightChartData1 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData1);
			const option = {
				tooltip: {
					trigger: 'item',
				},
				series: [
					{
						name: '面积模式',
						type: 'pie',
						radius: [10, 60],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 5,
						},
						data: [
							{ name: '天气预警', value: 100 },
							{ name: '病虫害预警', value: 50 },
							{ name: '任务预警', value: 130 },
							{ name: '监测设备预警', value: 62 },
						],
						label: {
							color: '#c0d1f2',
						},
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 当前设备监测
		const initRightChartData4 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData4);
			const option = {
				grid: {
					top: 10,
					right: 10,
					bottom: 20,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['1月', '2月', '3月', '4月', '5月', '6月'],
					axisLine: {
						lineStyle: {
							color: 'rgba(22, 207, 208, 0.1)',
							width: 1,
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						interval: 0,
						color: '#c0d1f2',
						textStyle: {
							fontSize: 10,
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						axisLabel: {
							color: '#c0d1f2',
						},
						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',
						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, 70],
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 近7天产品追溯扫码统计
		const initRightChartData3 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData3);
			const option = {
				grid: {
					top: 10,
					right: 0,
					bottom: 20,
					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: '#c0d1f2',
					},
				},
				yAxis: [
					{
						type: 'value',
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
							},
						},
						axisLabel: {
							color: '#c0d1f2',
						},
						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);
		};
		// 当前任务统计
		const initRightChartData6 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData6);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					top: 20,
					right: 50,
					bottom: 0,
					left: 80,
				},
				xAxis: [
					{
						splitLine: {
							show: false,
						},
						type: 'value',
						show: false,
					},
				],
				yAxis: [
					{
						splitLine: {
							show: false,
						},
						axisLine: {
							//y轴
							show: false,
						},
						type: 'category',
						axisTick: {
							show: false,
						},
						inverse: true,
						data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'],
						axisLabel: {
							color: '#A7D6F4',
							fontSize: 12,
						},
					},
				],
				series: [
					{
						name: '标准化',
						type: 'bar',
						barWidth: 10, // 柱子宽度
						label: {
							show: true,
							position: 'right', // 位置
							color: '#A7D6F4',
							fontSize: 12,
							distance: 15, // 距离
							formatter: '{c}%', // 这里是数据展示的时候显示的数据
						}, // 柱子上方的数值
						itemStyle: {
							barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

							color: new echarts.graphic.LinearGradient(
								1,
								0,
								0,
								0,
								[
									{
										offset: 0,
										color: '#51C5FD',
									},
									{
										offset: 1,
										color: '#005BB1',
									},
								],
								false
							), // 渐变
						},
						data: [75, 100, 60],
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 近7天投入品记录
		const initRightChartData2 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData2);
			const option = {
				grid: {
					top: 10,
					right: 0,
					bottom: 20,
					left: 30,
				},
				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: '#c0d1f2',
					},
				},
				yAxis: [
					{
						type: 'value',
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
							},
						},
						axisLabel: {
							color: '#c0d1f2',
						},
						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',
						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);
		};
		// 3DEarth 地图
		const init3DEarth = (globeRadius) => {
			let el = document.getElementById('3DEarth');
			el.style.height = `${proxy.$refs.rightChartData5.offsetHeight}px`;
			const myChart = echarts.init(el);
			const option = {
				globe: {
					baseTexture: worldImg,
					heightTexture: bathymetryImg,
					shading: 'realistic',
					light: {
						ambient: {
							intensity: 0.4,
						},
						main: {
							intensity: 0.4,
						},
					},
					viewControl: {
						autoRotate: true,
					},
					postEffect: {
						enable: true,
						bloom: {
							enable: true,
						},
					},
					globeRadius,
				},
				series: {
					type: 'lines3D',
					coordinateSystem: 'globe',
					blendMode: 'lighter',
					lineStyle: {
						width: 1,
						color: 'rgb(50, 50, 150)',
						opacity: 0.1,
					},
					data: [],
				},
			};
			// 随机模拟攻击线
			let rodamData = function () {
				let longitude = 105.18;
				let longitude2 = Math.random() * 360 - 180;
				let latitude = 37.51;
				let latitude2 = Math.random() * 180 - 90;
				return {
					coords: [
						[longitude2, latitude2],
						[longitude, latitude],
					],
					value: (Math.random() * 3000).toFixed(2),
				};
			};
			for (let i = 0; i < 150; i++) {
				option.series.data = option.series.data.concat(rodamData());
			}
			myChart.setOption(option);
		};
		// 监听地球大小变化
		const initAddEventListener3DEarth = () => {
			let w = document.body.clientWidth;
			let globeRadius = 0;
			if (w >= 1920) globeRadius = 100;
			else if (w > 1200 && w < 1920) globeRadius = 70;
			else if (w > 992 && w < 1200) globeRadius = 60;
			else if (w > 768 && w < 992) globeRadius = 40;
			else if (w < 768) globeRadius = 20;
			init3DEarth(globeRadius);
		};
		// 批量设置 echarts resize
		const initEchartsResize = () => {
			initAddEventListener3DEarth();
			window.addEventListener('resize', () => {
				for (let i = 0; i < state.myCharts.length; i++) {
					state.myCharts[i].resize();
				}
				initAddEventListener3DEarth();
			});
		};
		// 页面加载时
		onMounted(async () => {
			initTime();
			await initRightChartData1();
			await initRightChartData4();
			await initRightChartData3();
			await initRightChartData2();
			await initRightChartData6();
			await initEchartsResize();
		});
		// 页面卸载时
		onUnmounted(() => {
			window.clearInterval(state.time.fun);
		});
		return {
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.visualizing-demo2 {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: url(https://gitee.com/lyt-top/vue-next-admin-images/raw/master/visualizing/demo2.jpg);
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	font-size: 13px;
	.big-data-up {
		height: 70px;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 15px;
		color: #43bdf0;
		overflow: hidden;
		.up-left {
			width: 30%;
			font-style: italic;
		}
		.up-center {
			width: 40%;
			display: flex;
			justify-content: center;
			font-size: 20px;
			letter-spacing: 5px;
			background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0);
			-webkit-text-fill-color: transparent;
			background-clip: text;
			-webkit-background-clip: text;
			background-size: 200% 100%;
			animation: masked-animation 4s infinite linear;
			-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
			@keyframes masked-animation {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: -100% 0;
				}
			}
			position: relative;
			&::after {
				content: '';
				width: 50%;
				position: absolute;
				bottom: -15px;
				left: 50%;
				transform: translateX(-50%);
				border: 1px transparent solid;
				border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
			}
			span {
				cursor: pointer;
			}
		}
		.up-right {
			width: 30%;
			justify-content: flex-end;
			display: flex;
			align-items: center;
			.ml15:hover {
				cursor: pointer;
			}
			::v-deep(.el-dropdown) {
				font-size: 13px !important;
				color: #43bdf0;
				cursor: pointer;
			}
		}
	}
	.big-data-down {
		flex: 1;
		overflow: hidden;
		display: flex;
		.big-data-down-left,
		.big-data-down-right {
			width: 30%;
			display: flex;
			flex-direction: column;
			.flex-warp-item {
				padding: 0 7.5px 15px 15px;
				width: 100%;
				height: 33.33%;
				.flex-warp-item-box {
					width: 100%;
					height: 100%;
					background: rgba(22, 34, 58, 0.4);
					display: flex;
					flex-direction: column;
					padding: 15px;
					.flex-title {
						margin-bottom: 15px;
						color: #c0d1f2;
						display: flex;
						justify-content: space-between;
						.flex-title-small {
							font-size: 12px;
						}
					}
					.flex-content {
						flex: 1;
						font-size: 12px;
					}
					.flex-content-overflow {
						overflow: hidden;
					}
				}
			}
		}
		.big-data-down-left {
			color: #c0d1f2;
			.sky {
				display: flex;
				align-items: center;
				.sky-left {
					font-size: 30px;
				}
				.sky-center {
					flex: 1;
					overflow: hidden;
					padding: 0 10px;
					.font {
						margin-right: 15px;
						background: unset !important;
						border-radius: unset !important;
						padding: unset !important;
					}
					span {
						background: #22bc76;
						border-radius: 2px;
						padding: 0 5px;
					}
					.sky-tip {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.sky-right {
					span {
						font-size: 30px;
					}
					font {
						font-size: 20px;
					}
				}
			}
			.sky-dd {
				.sky-dl {
					display: flex;
					align-items: center;
					height: 28px;
					overflow: hidden;
					div {
						flex: 1;
						overflow: hidden;
						i {
							font-size: 14px;
						}
					}
					.tip {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					&:hover {
						background: rgba(0, 0, 0, 0.05);
						cursor: default;
						border-radius: 4px;
					}
					&:first-child:hover {
						background: unset;
					}
				}
				.sky-dl-first {
					color: #43bdf0;
				}
			}
			.d-states {
				display: flex;
				.d-states-item {
					flex: 1;
					display: flex;
					align-items: center;
					overflow: hidden;
					i {
						font-size: 20px;
						height: 33px;
						width: 33px;
						line-height: 33px;
						text-align: center;
						border-radius: 100%;
						flex-shrink: 1;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.i-bg1 {
						background: #22bc76;
					}
					.i-bg2 {
						background: #e2356d;
					}
					.i-bg3 {
						background: #43bbef;
					}
					.d-states-flex {
						overflow: hidden;
						padding: 0 10px 0;
						.d-states-item-label {
							color: #43bdf0;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.d-states-item-value {
							font-size: 20px;
							text-align: center;
						}
					}
				}
			}
			.d-btn {
				margin-top: 15px;
				.d-btn-item {
					border: 1px solid #c0d1f2;
					display: flex;
					width: 100%;
					height: 35px;
					border-radius: 35px;
					align-items: center;
					padding: 0 4px;
					margin-top: 15px;
					cursor: pointer;
					transition: all ease 0.3s;
					.d-btn-item-left {
						font-size: 20px;
						border: 1px solid #c0d1f2;
						width: 25px;
						height: 25px;
						line-height: 25px;
						border-radius: 100%;
						text-align: center;
						font-size: 14px;
					}
					.d-btn-item-center {
						padding: 0 10px;
						flex: 1;
					}
					.d-btn-item-eight {
						text-align: right;
						padding-right: 10px;
					}
				}
				.d-btn-active {
					transition: all ease 0.3s;
					border: 1px solid #43bdf0;
					color: #43bdf0;
					.d-btn-item-left {
						border: 1px solid #43bdf0;
					}
				}
			}
		}
		.big-data-down-center {
			width: 40%;
			display: flex;
			flex-direction: column;
			.big-data-down-center-one {
				height: 66.67%;
				padding: 0 7.5px 15px;
				.big-data-down-center-one-content {
					height: 100%;
					position: relative;
					.fixed-top,
					.fixed-right,
					.fixed-bottom,
					.fixed-left {
						position: absolute;
						width: 100px;
						height: 100px;
						display: flex;
						cursor: pointer;
						.circle {
							position: absolute;
							border-radius: 50%;
							background: rgba(0, 0, 0, 0.01);
							z-index: 10;
						}
						.text-box {
							position: relative;
							z-index: 11;
							color: #c0d1f2;
							margin: auto;
							text-align: center;
							font-size: 12px;
							i {
								font-size: 28px;
								margin-bottom: 10px;
							}
						}
					}
					.fixed-top {
						left: 20px;
						top: 20px;
					}
					.fixed-right {
						right: 20px;
						top: 20px;
					}
					.fixed-bottom {
						right: 20px;
						bottom: 20px;
					}
					.fixed-left {
						left: 20px;
						bottom: 20px;
					}
					.circle:nth-of-type(1) {
						width: 100px;
						height: 95px;
						animation: turnAround 6s infinite linear;
						box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4;
					}
					.circle:nth-of-type(2) {
						width: 95px;
						height: 100px;
						animation: turnAround 10s infinite linear;
						box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2;
					}
					.circle:nth-of-type(3) {
						width: 110px;
						height: 100px;
						animation: turnAround 5s infinite linear;
						box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc;
					}
					.circle:nth-of-type(4) {
						width: 100px;
						height: 110px;
						animation: turnAround 15s infinite linear;
						box-shadow: 0 0 1px 0 #09f, inset 0 0 10px 0 #09f;
					}
					@keyframes turnAround {
						100% {
							transform: rotate(360deg);
						}
					}
				}
			}
			.big-data-down-center-two {
				padding: 0 7.5px 15px;
				height: 33.33%;
				.flex-warp-item-box {
					width: 100%;
					height: 100%;
					background: rgba(22, 34, 58, 0.4);
					display: flex;
					flex-direction: column;
					padding: 15px;
					.flex-title {
						margin-bottom: 15px;
						color: #c0d1f2;
						display: flex;
						justify-content: space-between;
						.flex-title-small {
							font-size: 12px;
						}
					}
					.flex-content {
						flex: 1;
						font-size: 12px;
						display: flex;
						height: calc(100% - 30px);
						.flex-content-left {
							display: flex;
							flex-wrap: wrap;
							width: 120px;
							height: 100%;
							.monitor-item {
								width: 50%;
								display: flex;
								align-items: center;
								.monitor-wave {
									cursor: pointer;
									width: 40px;
									height: 40px;
									position: relative;
									background-color: #43bdf0;
									border-radius: 50%;
									overflow: hidden;
									text-align: center;
									&::before,
									&::after {
										content: '';
										position: absolute;
										left: 50%;
										width: 40px;
										height: 40px;
										background: #f4f4f4;
										animation: roateOne 10s linear infinite;
										transform: translateX(-50%);
										z-index: 1;
									}
									&::before {
										bottom: 10px;
										border-radius: 60%;
									}
									&::after {
										bottom: 8px;
										opacity: 0.7;
										border-radius: 37%;
									}
									.monitor-z-index {
										position: relative;
										z-index: 2;
										color: #4eb8ff;
										display: flex;
										align-items: center;
										height: 100%;
										justify-content: center;
										font-weight: bold;
									}
								}
								@keyframes roateOne {
									0% {
										transform: translate(-50%, 0) rotateZ(0deg);
									}
									50% {
										transform: translate(-50%, -2%) rotateZ(180deg);
									}
									100% {
										transform: translate(-50%, 0%) rotateZ(360deg);
									}
								}
								.monitor-active {
									background-color: #22bc76;
									.monitor-z-index {
										color: #22bc76;
									}
								}
							}
						}
						.flex-content-right {
							flex: 1;
						}
					}
				}
			}
		}
		.big-data-down-right {
			.flex-warp-item {
				padding: 0 15px 15px 7.5px;
				.flex-content {
					display: flex;
					flex-direction: column;
					.task {
						display: flex;
						height: 45px;
						.task-item {
							flex: 1;
							color: #c0d1f2;
							display: flex;
							justify-content: center;
							.task-item-box {
								position: relative;
								width: 45px;
								height: 45px;
								overflow: hidden;
								border-radius: 100%;
								z-index: 0;
								display: flex;
								align-items: center;
								flex-direction: column;
								justify-content: center;
								box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
								&::before {
									content: '';
									position: absolute;
									z-index: -2;
									left: -50%;
									top: -50%;
									width: 200%;
									height: 200%;
									background-repeat: no-repeat;
									background-size: 50% 50%, 50% 50%;
									background-position: 0 0, 100% 0, 100% 100%, 0 100%;
									background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
										linear-gradient(#ffb980, #ffb980);
									animation: rotate 2s linear infinite;
								}
								&::after {
									content: '';
									position: absolute;
									z-index: -1;
									left: 1px;
									top: 1px;
									width: calc(100% - 2px);
									height: calc(100% - 2px);
									border-radius: 100%;
								}
								.task-item-value {
									text-align: center;
									font-size: 14px;
									font-weight: bold;
								}
								.task-item-label {
									text-align: center;
								}
							}
							.task1 {
								&::after {
									background: #5492be;
								}
							}
							.task2 {
								&::after {
									background: #43a177;
								}
							}
							.task3 {
								&::after {
									background: #a76077;
								}
							}
							.task4 {
								&::after {
									background: #b4825a;
								}
							}
							.task5 {
								&::after {
									background: #74568f;
								}
							}
						}
						.task-first-item {
							flex-direction: column;
							text-align: center;
							.task-first {
								font-size: 20px;
							}
						}
					}
				}
			}
			.progress {
				flex: 1;
			}
		}
	}
}
</style>