zhgdlarge/src/views/commandScreen/commandCenter/centerTop.vue

<template>
	<div class="centerTop">
		<div class="top-content">
			<div class="content-div aq">
				<!-- <div class="circle-box">
					<span>{{ statScore.hiddenDangerScore }}分</span>
				</div> -->
				<div id="waterAq" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
				<span style="transform: translateY(-50px)">安全隐患治理</span>
			</div>
			<div class="content-div wd">
				<!-- <div class="circle-box">
					<span>{{ statScore.dangerEngScore }}分</span>
				</div> -->
				<div id="waterWd" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
				<span style="transform: translateY(-50px)">危大工程</span>
			</div>
			<div class="content-div jy">
				<!-- <div class="circle-box"> -->
				<!-- <span>{{statScore}}分</span> -->
				<!-- <span>25分</span>
				</div> -->
				<div id="waterJy" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
				<span style="transform: translateY(-50px)">安全教育</span>
			</div>
			<div class="content-div fx">
				<!-- <div class="circle-box">
					<span>{{ statScore.riskScore }}分</span>
				</div> -->
				<div id="waterFx" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
				<span style="transform: translateY(-50px)">风险管理</span>
			</div>
			<div class="content-div zn">
				<!-- <div class="circle-box">
					<span>{{ statScore.aiScore }}分</span>
				</div> -->
				<div id="waterZn" style="width: 80%; height: 80%; transform: translateY(-25px)"></div>
				<span style="transform: translateY(-50px)">AI警报</span>
			</div>
			<div class="count-div">
				<div class="count-div-item">
					<span>上月安全综合评分</span>
					<span>{{ statScore.lastMonthTotal }}</span>
					<span>分</span>
				</div>
				<div class="count-div-item">
					<span
						>相较上月{{
							statScore.radio > 0
								? "上升" + (statScore.radio ? statScore.radio : 0)
								: "下降" + (statScore.radio ? statScore.radio.toString().substr(1) : 0)
						}}
						%</span
					>
					<span :style="statScore.radio > 0 ? 'color:#0db027' : 'color:#f77c7d'">{{ statScore.radio > 0 ? "↑" : "↓" }} </span>
				</div>
			</div>
			<div
				:class="['score-div', statScore.total >= 80 ? 'scoreBg1' : statScore.total >= 60 ? 'scoreBg2' : 'scoreBg3']"
				@click="openDialogData({ index: 9, title: '月度安全综合评分' })"
			>
				<div class="score-part">
					<span>{{ statScore.total }}</span>
					<span>分</span>
				</div>
				<div class="scoreInner scoreTextBg1" v-if="statScore.total >= 80">
					<span style="font-size: 18px">安全评分</span>
					<div class="scoreReview">优秀</div>
					<div class="scoreStar"></div>
				</div>
				<div class="scoreInner scoreTextBg2" v-if="statScore.total >= 60 && statScore.total < 80">
					<span style="font-size: 18px">安全评分</span>
					<div class="scoreReview">一般</div>
					<div class="scoreStar"></div>
				</div>
				<div class="scoreInner scoreTextBg3" v-if="statScore.total < 60">
					<span style="font-size: 18px">安全评分</span>
					<div class="scoreReview">差</div>
					<div class="scoreStar"></div>
				</div>
			</div>
			<div class="classify-div">
				<div class="classify-div-item" @click="openDialogData({ index: 1, title: '危大工程' })">
					<span style="font-size: 12px">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
				</div>
				<div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })">
					<span style="font-size: 12px">安全教育&nbsp;&nbsp;{{ statsDirectorateBigScreen.workerInfoAuditRecordNum }}</span>
				</div>
				<div class="classify-div-item" style="width: 280px" @click="openDialogData({ index: 3, title: '影响进度计划因素' })">
					<span style="font-size: 12px">影响进度计划因素&nbsp;&nbsp;{{ statsDirectorateBigScreen.taskProgressContentNum }}</span>
				</div>
				<div class="classify-div-item" @click="openDialogData({ index: 4, title: '风险统计' })">
					<span style="font-size: 12px"
						>风险统计&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
					>
				</div>
				<div class="classify-div-item" @click="openDialogData({ index: 5, title: '安全隐患' })">
					<span style="font-size: 12px"
						>安全隐患&nbsp;&nbsp;{{ statsDirectorateBigScreen.securityQualityInspectionRecordNum }}</span
					>
				</div>
				<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
					<span style="font-size: 12px">AI警报&nbsp;&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
				</div>
			</div>
			<div class="background-title">
				<span @click="openDialogData({ index: 9, title: '月度安全综合评分' })">查看月度安全评分报告详情</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
import "echarts-liquidfill";

import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
import { getStatsDirectorateBigScreenApi, getStatScoreApi } from "@/api/modules/agjtCommandApi";
import { selectLiveVideoListApi } from "@/api/modules/video";
import ckplayerComp from "./ckplayerComp.vue";
import { COMPANY } from "@/config/config";

const emits = defineEmits(["openDialog"]);
const store = GlobalStore();
const videoList = ref([] as any);
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);
// 打开弹窗
const openDialogData = (obj: any) => {
	emits("openDialog", obj);
};
watch(
	() => props.projectData,
	newVal => {
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
		}
	}
);

//绘画安全隐患治理水波图
function drawAqWater() {
	type EChartsOption = echarts.EChartsOption;
	var chartDom = document.getElementById("waterAq")!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;
	// 配置项
	option = {
		series: [
			{
				type: "liquidFill", //设置图表类型
				// data: [0.6], // 设置水位，值为0到1之间
				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
				// data: [
				//   0.2,
				//   {
				//     value: 0.3, // 图形数据写法二
				//     direction: "left", // 水波运动方向
				//     itemStyle: {
				//       color: "blue", // 水波颜色
				//       opacity: 0.8, // 透明度
				//     },
				//     emphasis: {
				//       itemStyle: {
				//         color: "lightblue", // 鼠标移入时的水波颜色
				//         opacity: 1, // 鼠标移入时的透明度
				//       },
				//     },
				//   },
				// ],
				waveAnimation: true, //是否开启水波动画,
				amplitude: 15, // 设置振幅，值越大波形越尖
				waveLength: 150, //水波的长度，值越大水波越长
				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
				radius: "60%", // 设置图的大小  默认为50%
				// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
				center: ["50%", "50%"], //中心点的位置1E90FF
				// animationEasing:'linear',
				animationEasing: "easeOut",
				outline: {
					borderDistance: 4, // 外边框距离
					itemStyle: {
						borderWidth: 2, // 外边框宽度
						borderColor: "#156ACF" // 外边框颜色
					}
				},
				//  // 水波样式
				//  itemStyle:{
				//     opacity:0.5,                      // 透明度
				//     color:'red',                      // 统一配置水波的颜色
				//     shadowBlur:10,                    // 水波阴影大小
				//     shadowColor:'red',                // 阴影颜色
				//     shadowOffsetX:10,                 // 阴影水平偏移量
				//     shadowOffsetY:10,                 // 阴影竖直偏移量
				// },
				backgroundStyle: {
					color: "rgba(0,0,0,0)" // 背景色
				},
				label: {
					normal: {
						formatter: function () {
							return statScore.value.hiddenDangerScore + "分";
						},
						textStyle: {
							//   color: "#6495ED", //蓝色
							color: "#fff",
							insideColor: "#fff",
							fontSize: 16
						}
					}
				}
			}
		]
	};
	// 使用配置项设置图表
	myChart.setOption(option);
}
//绘画危大工程水波图
function drawWdWater() {
	type EChartsOption = echarts.EChartsOption;
	var chartDom = document.getElementById("waterWd")!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;
	// 配置项
	option = {
		series: [
			{
				type: "liquidFill", //设置图表类型
				// data: [0.6], // 设置水位，值为0到1之间
				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
				// data: [
				//   0.2,
				//   {
				//     value: 0.3, // 图形数据写法二
				//     direction: "left", // 水波运动方向
				//     itemStyle: {
				//       color: "blue", // 水波颜色
				//       opacity: 0.8, // 透明度
				//     },
				//     emphasis: {
				//       itemStyle: {
				//         color: "lightblue", // 鼠标移入时的水波颜色
				//         opacity: 1, // 鼠标移入时的透明度
				//       },
				//     },
				//   },
				// ],
				waveAnimation: true, //是否开启水波动画,
				amplitude: 15, // 设置振幅，值越大波形越尖
				waveLength: 150, //水波的长度，值越大水波越长
				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
				radius: "60%", // 设置图的大小  默认为50%
				// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
				center: ["50%", "50%"], //中心点的位置1E90FF
				// animationEasing:'linear',
				animationEasing: "easeOut",
				outline: {
					borderDistance: 4, // 外边框距离
					itemStyle: {
						borderWidth: 2, // 外边框宽度
						borderColor: "#156ACF" // 外边框颜色
					}
				},
				//  // 水波样式
				//  itemStyle:{
				//     opacity:0.5,                      // 透明度
				//     color:'red',                      // 统一配置水波的颜色
				//     shadowBlur:10,                    // 水波阴影大小
				//     shadowColor:'red',                // 阴影颜色
				//     shadowOffsetX:10,                 // 阴影水平偏移量
				//     shadowOffsetY:10,                 // 阴影竖直偏移量
				// },
				backgroundStyle: {
					color: "rgba(0,0,0,0)" // 背景色
				},
				label: {
					normal: {
						formatter: function () {
							return statScore.value.dangerEngScore + "分";
						},
						textStyle: {
							color: "#fff",
							insideColor: "#fff",
							fontSize: 16
						}
					}
				}
			}
		]
	};
	// 使用配置项设置图表
	myChart.setOption(option);
}
//绘画安全隐患治理水波图
function drawJyWater() {
	type EChartsOption = echarts.EChartsOption;
	var chartDom = document.getElementById("waterJy")!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;
	// 配置项
	option = {
		series: [
			{
				type: "liquidFill", //设置图表类型
				// data: [0.6], // 设置水位，值为0到1之间
				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
				// data: [
				//   0.2,
				//   {
				//     value: 0.3, // 图形数据写法二
				//     direction: "left", // 水波运动方向
				//     itemStyle: {
				//       color: "blue", // 水波颜色
				//       opacity: 0.8, // 透明度
				//     },
				//     emphasis: {
				//       itemStyle: {
				//         color: "lightblue", // 鼠标移入时的水波颜色
				//         opacity: 1, // 鼠标移入时的透明度
				//       },
				//     },
				//   },
				// ],
				waveAnimation: true, //是否开启水波动画,
				amplitude: 15, // 设置振幅，值越大波形越尖
				waveLength: 150, //水波的长度，值越大水波越长
				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
				radius: "60%", // 设置图的大小  默认为50%
				// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
				center: ["50%", "50%"], //中心点的位置1E90FF
				// animationEasing:'linear',
				animationEasing: "easeOut",
				outline: {
					borderDistance: 4, // 外边框距离
					itemStyle: {
						borderWidth: 2, // 外边框宽度
						borderColor: "#156ACF" // 外边框颜色
					}
				},
				//  // 水波样式
				//  itemStyle:{
				//     opacity:0.5,                      // 透明度
				//     color:'red',                      // 统一配置水波的颜色
				//     shadowBlur:10,                    // 水波阴影大小
				//     shadowColor:'red',                // 阴影颜色
				//     shadowOffsetX:10,                 // 阴影水平偏移量
				//     shadowOffsetY:10,                 // 阴影竖直偏移量
				// },
				backgroundStyle: {
					color: "rgba(0,0,0,0)" // 背景色
				},
				label: {
					normal: {
						formatter: function () {
							// return statScore.value + "分"
							return "25分";
						},
						textStyle: {
							color: "#fff",
							insideColor: "#fff",
							fontSize: 16
						}
					}
				}
			}
		]
	};
	// 使用配置项设置图表
	myChart.setOption(option);
}
//绘画安全隐患治理水波图
function drawFxWater() {
	type EChartsOption = echarts.EChartsOption;
	var chartDom = document.getElementById("waterFx")!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;
	// 配置项
	option = {
		series: [
			{
				type: "liquidFill", //设置图表类型
				// data: [0.6], // 设置水位，值为0到1之间
				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
				// data: [
				//   0.2,
				//   {
				//     value: 0.3, // 图形数据写法二
				//     direction: "left", // 水波运动方向
				//     itemStyle: {
				//       color: "blue", // 水波颜色
				//       opacity: 0.8, // 透明度
				//     },
				//     emphasis: {
				//       itemStyle: {
				//         color: "lightblue", // 鼠标移入时的水波颜色
				//         opacity: 1, // 鼠标移入时的透明度
				//       },
				//     },
				//   },
				// ],
				waveAnimation: true, //是否开启水波动画,
				amplitude: 15, // 设置振幅，值越大波形越尖
				waveLength: 150, //水波的长度，值越大水波越长
				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
				radius: "60%", // 设置图的大小  默认为50%
				// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
				center: ["50%", "50%"], //中心点的位置1E90FF
				// animationEasing:'linear',
				animationEasing: "easeOut",
				outline: {
					borderDistance: 4, // 外边框距离
					itemStyle: {
						borderWidth: 2, // 外边框宽度
						borderColor: "#156ACF" // 外边框颜色
					}
				},
				//  // 水波样式
				//  itemStyle:{
				//     opacity:0.5,                      // 透明度
				//     color:'red',                      // 统一配置水波的颜色
				//     shadowBlur:10,                    // 水波阴影大小
				//     shadowColor:'red',                // 阴影颜色
				//     shadowOffsetX:10,                 // 阴影水平偏移量
				//     shadowOffsetY:10,                 // 阴影竖直偏移量
				// },
				backgroundStyle: {
					color: "rgba(0,0,0,0)" // 背景色
				},
				label: {
					normal: {
						formatter: function () {
							return statScore.value.riskScore + "分";
						},
						textStyle: {
							color: "#fff",
							insideColor: "#fff",
							fontSize: 16
						}
					}
				}
			}
		]
	};
	// 使用配置项设置图表
	myChart.setOption(option);
}
//绘画安全隐患治理水波图
function drawZnWater() {
	type EChartsOption = echarts.EChartsOption;
	var chartDom = document.getElementById("waterZn")!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;
	// 配置项
	option = {
		series: [
			{
				type: "liquidFill", //设置图表类型
				// data: [0.6], // 设置水位，值为0到1之间
				data: [0.001, 0.001, 0.001, 0.001, 0.001], //设置水位，可以写多个值，用来设置多个水位
				// data: [
				//   0.2,
				//   {
				//     value: 0.3, // 图形数据写法二
				//     direction: "left", // 水波运动方向
				//     itemStyle: {
				//       color: "blue", // 水波颜色
				//       opacity: 0.8, // 透明度
				//     },
				//     emphasis: {
				//       itemStyle: {
				//         color: "lightblue", // 鼠标移入时的水波颜色
				//         opacity: 1, // 鼠标移入时的透明度
				//       },
				//     },
				//   },
				// ],
				waveAnimation: true, //是否开启水波动画,
				amplitude: 15, // 设置振幅，值越大波形越尖
				waveLength: 150, //水波的长度，值越大水波越长
				shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
				direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom',
				radius: "60%", // 设置图的大小  默认为50%
				// color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位
				color: ["#156ACF"], // 设置颜色，可以设置多个值，用来设置多个水位
				center: ["50%", "50%"], //中心点的位置1E90FF
				// animationEasing:'linear',
				animationEasing: "easeOut",
				outline: {
					borderDistance: 4, // 外边框距离
					itemStyle: {
						borderWidth: 2, // 外边框宽度
						borderColor: "#156ACF" // 外边框颜色
					}
				},
				//  // 水波样式
				//  itemStyle:{
				//     opacity:0.5,                      // 透明度
				//     color:'red',                      // 统一配置水波的颜色
				//     shadowBlur:10,                    // 水波阴影大小
				//     shadowColor:'red',                // 阴影颜色
				//     shadowOffsetX:10,                 // 阴影水平偏移量
				//     shadowOffsetY:10,                 // 阴影竖直偏移量
				// },
				backgroundStyle: {
					color: "rgba(0,0,0,0)" // 背景色
				},
				label: {
					normal: {
						formatter: function () {
							return statScore.value.aiScore + "分";
						},
						textStyle: {
							color: "#fff",
							insideColor: "#fff",
							fontSize: 16
						}
					}
				}
			}
		]
	};
	// 使用配置项设置图表
	myChart.setOption(option);
}

//效果图
const picUrl = ref("" as any);

const BASEURL = import.meta.env.VITE_API_URL;
// 显示视频
const showVideo = ref(1 as any);

// 显示更换图片
const showChangeImg = ref(false as any);

// 显示更换视频
const showChangeVideo = ref(false as any);

let topText2 = ref([
	{ id: 1, title: "现场视频", isActive: true },
	{ id: 2, title: "宣传视频", isActive: false },
	{ id: 3, title: "效果图", isActive: false }
]);
let topText = ref([
	// { id: 1, title: "现场视频", isActive: true },
	{ id: 2, title: "宣传视频", isActive: false },
	{ id: 3, title: "效果图", isActive: false }
]);
const getVideoList = async (showLoading: boolean) => {
	let res: any = await selectLiveVideoListApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result && res.result.extend1) {
		videoList.value = JSON.parse(res.result.extend1).result.videoList;
		// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
		setTimeout(() => {
			// 获取所有的 video 元素
			var videos = document.querySelectorAll(".href-content video");
			// var videos = document.getElementsByTagName("video");
			// 遍历所有的 video 元素
			for (var i = 0; i < videos.length; i++) {
				// 修改视频元素的样式
				videos[i].style.width = "99.9%";
				videos[i].style.height = "99.9%";
			}
		}, 2000);
	}
};
let statsDirectorateBigScreen = ref({} as any);
//获取centerTop底部按钮显示数据
const getStatsDirectorateBigScreen = async (showLoading: boolean) => {
	const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn }, showLoading);
	statsDirectorateBigScreen.value = res.result;
};
let statScore = ref({
	dangerEngScore: 0,
	hiddenDangerScore: 0,
	aiScore: 0,
	riskScore: 0,
	total: 0,
	lastMonthTotal: 0
} as any);
//获取centerTop底部按钮显示数据
const getStatScore = async (showLoading: boolean) => {
	const res = await getStatScoreApi({ projectSn: store.sn }, showLoading);
	statScore.value = res.result;

	drawAqWater();
	drawWdWater();
	drawJyWater();
	drawFxWater();
	drawZnWater();
};

function boxStyle(item: any) {
	if (item.isActive) {
		let choiseStyle = {
			color: "#fff"
		};
		return choiseStyle;
	}
	return {};
}
let tabIndex = ref(1 as any);
function activeBtn(item: any) {
	let currentState = item.isActive;
	if (!currentState) {
		topText.value.forEach(el => {
			el.isActive = false;
		});
		item.isActive = !currentState;
		tabIndex.value = item.id;
	}
	showVideo.value = item.id;
}

const uploadFail = () => {
	ElMessage({
		showClose: true,
		message: "上传失败，请重试",
		type: "warning"
	});
};

const fileTypeFail = (text: any) => {
	ElMessage({
		showClose: true,
		message: text,
		type: "warning"
	});
};

const uploadSuccess = () => {
	ElMessage({
		showClose: true,
		message: "上传成功",
		type: "success"
	});
};
// 查询效果图
function getQueryBySnData(showLoading: boolean) {
	queryBySnData(
		{
			projectSn: store.sn,
			showType: 3
		},
		showLoading
	).then((res: any) => {
		if (res.result) {
			picUrl.value = res.result.configValue;
		}
	});
}
// //保存或删除宣传视频
function saveOrDeleteVideo(url) {
	editProjectInfo({
		projectSn: store.sn,
		videoUrl: url
	}).then(res => {
		uploadSuccess(); //"上传成功"
		projectData.value.videoUrl = url;
	});
}
//将方法暴露给父组件
defineExpose({
	getQueryBySnData
});
const setIntervalFn = (showLoading: boolean) => {
	getVideoList(showLoading);
	getQueryBySnData(showLoading);
	getStatsDirectorateBigScreen(showLoading);
	getStatScore(showLoading);
};
onMounted(async () => {
	setIntervalFn(false);
	// 定时三十秒刷新
	setInterval(() => {
		setIntervalFn(true);
	}, 30000);
});
</script>

<style lang="scss" scoped>
.scoreBg1 {
	background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 115px);
}
.scoreBg2 {
	background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 115px);
}
.scoreBg3 {
	background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 115px);
}
.scoreTextBg1 {
	background-image: radial-gradient(circle, rgb(46, 200, 49) 0px, rgba(255, 255, 255, 0) 40px);
}
.scoreTextBg2 {
	background-image: radial-gradient(circle, rgb(255, 175, 0) 0px, rgba(255, 255, 255, 0) 40px);
}
.scoreTextBg3 {
	background-image: radial-gradient(circle, rgb(200, 46, 56) 0px, rgba(255, 255, 255, 0) 40px);
}
.centerTop {
	// background-color: darkred;
	.top-content {
		height: 100%;
		position: relative;
		background-image: url("@/assets/images/commandScreen/top-bg.png");
		// background-position: center;
		background-position: -28px;
		background-repeat: no-repeat;

		.content-div {
			width: 30%;
			height: 30%;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;

			.circle-box {
				width: 70px;
				height: 70px;
				color: white;
				font-size: 14px;
				text-align: center;

				// padding: 23px 20px;
				// border: 2px solid #318FF7;
				background: url("@/assets/images/commandScreen/bg10.png") no-repeat;
				background-size: 100% 100%;
				border-radius: 50%;
				display: flex;
				justify-content: center;

				span {
					margin-top: 10px;
				}
			}

			> span {
				margin-top: 10px;
				color: white;
			}
		}

		.aq {
			// left: 40px;
			// top: 180px;
			left: 0%;
			top: 45%;
		}

		.wd {
			// left: 200px;
			// top: 80px;
			left: 12%;
			top: 20%;
		}

		.jy {
			// left: 400px;
			// top: 5px;
			left: 35%;
			top: 0%;
		}

		.fx {
			// right: 180px;
			// top: 80px;
			right: 12%;
			top: 20%;
		}

		.zn {
			// right: 40px;
			// top: 180px;
			right: 0%;
			top: 45%;
		}

		.count-div {
			width: 60%;
			color: white;
			position: absolute;
			// bottom: 95px;
			// left: 170px;
			bottom: 19%;
			left: 18%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-item {
				font-size: 14px;

				> span:nth-child(2) {
					color: #2983e1;
				}
			}
		}

		.score-div {
			color: white;
			position: absolute;
			// bottom: 210px;
			// left: 383px;
			width: 30%;
			height: 45%;
			bottom: 30%;
			left: 35.5%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.score-part {
				margin-top: 60px;
				span:nth-child(1) {
					font-size: 72px;
				}

				span:nth-child(2) {
					font-size: 18px;
				}
			}

			> span {
				color: white;
				font-size: 18px;
			}
			.scoreInner {
				text-align: center;
				margin-top: -10px;
				width: 90%;
				// height: 100px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				// background-color: red;
				.scoreReview {
					opacity: 0.7;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 50px;
					// background-color: blue;
				}
				.scoreStar {
					// background-color: purple;
					// margin-top: 20px;
					width: 28%;
					height: 40px;
					background: url("@/assets/images/green_flag_bg.png") no-repeat;
					background-size: 100% 100%;

					transform: translateY(-20px);
				}
			}
		}

		.classify-div {
			width: 100%;
			color: white;
			position: absolute;
			bottom: 10px;
			left: 0px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-item {
				width: 180px;
				height: 75px;
				// background-color: #0090D8;
				// padding: 10px 20px;
				// border-radius: 24px;
				background: url("@/assets/images/commandScreen/bg9.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 5px;

				span {
					margin-top: 10px;
				}
			}
		}

		.background-title {
			width: 100%;
			height: 40px;
			position: absolute;
			text-align: center;
			line-height: 50px;
			color: #00e2f9;
			font-size: 14px;
			bottom: -10px;
			left: 0px;
			background-image: url("@/assets/images/commandScreen/title-bg.png");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}
</style>