zhgdlarge/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightTop.vue

<template>
	<div class="leftTop">
		<Card title="隐患智能统计分析">
			<div class="box-content">
				<div class="contentTop contentMiddle">
					<div class="ctHead">
						<div>
							质量重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
							>个，占比<text>{{ overdueMajorDangerRate }}%</text>
						</div>
					</div>
					<div class="cmHead">
						<div>
							安全重大隐患未销项<text>{{ majorDangerCount }}</text
							>个，占比<text>{{ majorDangerRate }}%</text>
						</div>
					</div>
					<div class="ctContent" style="position: relative">
						<div id="echartsSafe" style="width: 100%; height: 100%;"></div>
						<div class="safetext1" v-if="dataList.length != 0">状态统计（较昨日）</div>
						<div class="safetext2" v-if="dataList.length != 0">风险统计（较昨日）</div>
						<div class="notoDta" v-if="dataList.length == 0">
							<img src="@/assets/images/noData.png" alt="" />
							<p>暂无数据</p>
						</div>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
import * as echarts from "echarts";
const store = GlobalStore();
let questionTotal = ref(0 as any);
const echartsTest = ref();
const majorDangerCount = ref(0 as any);
const majorDangerRate = ref(0 as any);
const overdueMajorDangerCount = ref(0 as any);
const overdueMajorDangerRate = ref(0 as any);
let dataList = ref([
	{
		enumType: "",
		value: 30,
		show: true,
		name: "重大隐患",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			normal: {
				color: "#EC6266",
				borderWidth: 20
			}
		}
	},
	{
		enumType: "",
		value: 70,
		show: true,
		name: "一般隐患",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			normal: {
				color: "#6375C7",
				borderWidth: 20
			}
		}
	}
]);
const Pie = () => {
	let dataArr = [];
	for (var i = 0; i < 150; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "#7cf4f1",
						borderWidth: 0,
						borderColor: "#7f6546"
					}
				}
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)"
					}
				}
			});
		}
	}
	return dataArr;
}
const drawEchart = () => {
	echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
	let option = {
		animation: false, // 取消动画
		tooltip: {
			trigger: "item",
			// position: ['50%','50%']
		},
		title: {
			text: 100,
			subtext: "累计隐患总数",
			x: "17%",
			y: "36%",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 26,
				fontWeight: "normal",
				// align: "center",
				fontFamily: "sadigitalNumber"
			},
			subtextStyle: {
				color: "#ccc",
				fontSize: 10,
				fontWeight: "normal"
				// align: "center"
			}
		},
		legend: [
			{
				title: "风险图",
				selectedMode: true, // 取消图例上的点击事件
				icon: "rect",
				type: "plain",
				orient: "vertical",
				right: "0%",
				top: "25%",
				align: "left",
				itemGap: 14,
				itemWidth: 8, // 设置宽度
				itemHeight: 7, // 设置高度
				symbolKeepAspect: false,
				textStyle: {
					color: "#000",
					rich: {
						name: {
							verticalAlign: "right",
							align: "left",
							fontSize: 10,
							color: "#FFFFFF"
						},
						value: {
							align: "left",
							fontSize: 14,
							color: "#FFFFFF"
						},
						color1: {
							align: "left",
							fontSize: 14,
							color: "#0063C4"
						},
						color2: {
							align: "left",
							fontSize: 14,
							color: "#D81E06"
						},
						value1: {
							align: "left",
							fontSize: 12,
							color: "#FFFFFF"
						}
					}
				},
				data: dataList.value.map((item, index) => {
					if (item.show && index != 4) {
						return item.name;
					}
				}),
				formatter: function (data: any) {
					if (dataList.value && dataList.value.length) {
						for (let i = 0; i < dataList.value.length; i++) {
							if (data === dataList.value[i].name) {
								if (data == "无") return;
								let value = dataList.value[i].value;
								const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
								let percentage =
									greatFaultLevelNumJzrRate >= 0
										? greatFaultLevelNumJzrRate + "%"
										: greatFaultLevelNumJzrRate.toString().substr(1) + "%";

								const templateString = greatFaultLevelNumJzrRate > 0 ? `color1|↑` : "color2|↓";
								return "{name| " + data + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
							}
						}
					}
				}
			},
			{
				name: "状态统计（较昨日）",
				selectedMode: false, // 取消图例上的点击事件
				icon: "none",
				type: "plain",
				orient: "vertical",
				left: "35%",
				top: "25%",
				align: "left",
				itemGap: 14,
				itemWidth: 8, // 设置宽度
				itemHeight: 7, // 设置高度
				symbolKeepAspect: false,
				textStyle: {
					color: "#000",
					rich: {
						name: {
							verticalAlign: "right",
							align: "left",
							fontSize: 10,
							color: "#FFFFFF"
						},
						value: {
							align: "left",
							fontSize: 14,
							color: "#FFFFFF"
						},
						color1: {
							align: "left",
							fontSize: 14,
							color: "#0063C4"
						},
						color2: {
							align: "left",
							fontSize: 14,
							color: "#D81E06"
						},
						value1: {
							align: "left",
							fontSize: 12,
							color: "#FFFFFF"
						}
					}
				},
				data: dataList.value.map(item => {
					if (item.show) {
						return item.name;
					}
				}),
				formatter: function (data: any) {
					if (dataList.value && dataList.value.length) {
						for (let i = 0; i < dataList.value.length; i++) {
							if (data === dataList.value[i].name) {
								let value = dataList.value[i].rectificationNum;
								let rectificationName = dataList.value[i].rectificationName;
								const rectificationNumJzrRate = Number(dataList.value[i].rectificationNumJzrRate);
								let percentage =
									rectificationNumJzrRate >= 0
										? rectificationNumJzrRate.toFixed(2) + "%"
										: rectificationNumJzrRate.toFixed(2).toString().substr(1) + "%";
								const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
								// ↓
								return (
									"{name| " + rectificationName + "}  {gap|  }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
								);
							}
						}
					}
				}
			}
		],
		series: [
			// 外侧光线
			{
				name: "",
				type: "gauge",
				center: ["18%", "52%"],
				radius: "88%",
				startAngle: 235,
				endAngle: -50,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								100 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: "#526277"
									},
									{
										offset: 0.25,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 0.7,
										color: "rgba(4, 14, 54,0.4)"
									},
									{
										offset: 1,
										color: "#526277"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "gauge",
				center: ["18%", "52%"],
				radius: "80%",
				startAngle: 245,
				endAngle: -115,
				min: 0,
				max: 100,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						color: [
							[
								200 / 100,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 1,
										color: "#52bef0"
									},
									{
										offset: 0,
										color: "#13356b"
									}
								])
							],
							[1, "rgba(255,255,255,0)"]
						]
					}
				},

				axisTick: {
					show: 0
				},
				splitLine: {
					show: 0
				},
				axisLabel: {
					show: 0
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				name: "",
				type: "pie",
				radius: [65, 75],
				center: ["18%", "52%"],
				hoverAnimation: true,
				itemStyle: {
					borderRadius: 10,
					borderWidth: 10
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: dataList.value
			},
			{
				type: "pie",
				radius: ["57", "60"],
				center: ["18%", "52%"],
				label: {
					show: false
				},
				data: Pie()
			}
		]
	};
	echartsTest.value.setOption(option, true);
	window.addEventListener("resize", () => {
		echartsTest.value.resize();
	});

	//图例点击事件
	// echartsTest.value.on("legendselectchanged", (params: any) => {
	// 	echartsTest.value.setOption({
	// 		legend: { selected: { [params.name]: true } }
	// 	});

	// 	emits("openDialog", {
	// 		index: 7,
	// 		title: params.name + "超期未整改",
	// 		majorInfo: {
	// 			isOverdueRectification: 1,
	// 			isNotQualified: 0,
	// 			enumType: dataList.value.find(item => item.name == params.name)?.enumType,
	// 			inspectStartTime: dateRange.value[0],
	// 			inspectEndTime: dateRange.value[1]
	// 		}
	// 	});
	// });
}
onMounted(async () => {
	drawEchart();
});
</script>

<style lang="scss" scoped>
.safetext1 {
	position: absolute;
	top: 6%;
	color: white;
	left: 42%;
}
.safetext2 {
	position: absolute;
	top: 6%;
	color: white;
	right: 3%;
}
.leftTop {
	width: 100%;
	height: 100%;
	.box-content {
		height: 100%;
		.contentTop {
			margin-top: 10px;
			width: 100%;
			height: 100%;

			.ctHead {
				background-color: #002f69;
				padding-bottom: 5px;
				color: #fff;
				height: 13%;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				cursor: pointer;

				text {
					font-size: 24px;
					color: #fc4c4c;
				}
			}

			.ctContent {
				height: 68%;
				// background-color: darkred;
			}
		}

		.contentMiddle {
			width: 100%;
			height: 100%;

			.cmHead {
				background-color: #002f69;
				padding-bottom: 5px;
				color: #fff;
				height: 13%;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				margin-top: 1%;
				cursor: pointer;

				text {
					font-size: 24px;
					color: #0db027;
				}
			}
		}
	}
}
.notoDta {
	top: 25%;
	width: 50%;
	// left: 40%;
	position: absolute;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 30%;
	}
}
::v-deep .h-card .content {
	height: 80%;
}
::v-deep .h-card {
	position: relative;
}
</style>