zhgdlarge/src/views/sevenLargeScreen/safetyManagement/wallScaffold2/topFour.vue

<template>
	<Card title="近30天报警情况统计">
		<div class="alarm-content">
			<div id="alarmId" ref="alarmRef" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, ref, watch } from "vue";
import { selectMonitorTypeAlarmCountListApi } from "@/api/modules/securityManagement";
import { GlobalStore } from "@/stores";
import * as echarts from "echarts";
// 当前环境
const BASEURL = import.meta.env.VITE_API_URL;
const store = GlobalStore();
const props = defineProps(["devSn"]);
let colorList = ref(["#4cc4f8", "#ec6266"] as any);
let dataList = ref([
	{
		value: 0,
		show: true,
		name: "超出报警值",
		itemStyle: {
			normal: {
				color: colorList.value[0],
				borderWidth: 20
			}
		}
	},
	{
		value: 0,
		show: true,
		name: "超出速率值",
		itemStyle: {
			normal: {
				color: colorList.value[1],
				borderWidth: 20
			}
		}
	}
]);
function 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;
}
let gradeMax = ref(0 as any);
function drawEchart() {
	let echartsTest = echarts.init(document.getElementById("alarmId"));
	let option = {
		tooltip: {
			trigger: "item"
		},
		title: {
			text: gradeMax.value,
			subtext: "风险总数",
			x: "34%",
			y: "40%",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 24,
				fontWeight: "normal",
				fontFamily: "sadigitalNumber",
				lineHeight: 35
			},
			subtextStyle: {
				color: "#ccc",
				fontSize: 16,
				fontWeight: "normal"
			}
		},
		legend: {
			selectedMode: false, // 取消图例上的点击事件
			icon: "rect",
			type: "plain",
			orient: "vertical",
			left: "67%",
			top: "30%",
			align: "left",
			itemGap: 30,
			itemWidth: 8, // 设置宽度
			itemHeight: 7, // 设置高度
			symbolKeepAspect: false,
			textStyle: {
				color: "#000",
				rich: {
					name: {
						verticalAlign: "right",
						align: "left",
						fontSize: 14,
						color: "#FFFFFF"
					},
					value: {
						align: "left",
						fontSize: 14,
						color: "#FFFFFF"
					}
				}
			},
			data: dataList.value.map(item => {
				if (item.show) {
					return item.name;
				}
			}),
			formatter: function (data) {
				// 分母不为0
				if (gradeMax.value === 0) {
					gradeMax.value = 1;
				}
				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].value;
							let percentage = ((value / gradeMax.value) * 100).toFixed(2) + "%";
							// return "{name|" + data + "}  {gap|}" + "{value|  " + value + "            " + percentage + "}";
							return "{name|" + data + "}  {gap|}" + "{value|  " + value + "}";
						}
					}
				}
			}
		},
		series: [
			// 外侧光线
			{
				name: "",
				type: "gauge",
				center: ["35%", "50%"],
				radius: "70%",
				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: ["35%", "50%"],
				radius: "61%",
				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: 0.8,
										color: "#52bef0"
									},
									{
										offset: 0.5,
										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: [80, 90],
				center: ["35%", "50%"],
				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: ["38%", "40%"],
				center: ["35%", "50%"],
				label: {
					show: false
				},

				data: Pie()
			}
		]
	};
	echartsTest.setOption(option, true);
}
//获取设备列表
const getDataList = async () => {
	const res: any = await selectMonitorTypeAlarmCountListApi({
		projectSn: store.sn,
		exteriorScaffoldingEngineeringId: props.devSn,
		searchType: 2
	});
	console.log("统计数据列表", res);
	let numberOneVal = 0;
	let numberTwoVal = 0;
	res.result.forEach((item: any) => {
		numberOneVal += item.superAlarmNumber; // 超报警
		numberTwoVal += item.rateAlarmNumber; // 超速率
	});
	dataList.value[0].value = numberOneVal;
	dataList.value[1].value = numberTwoVal;
	gradeMax.value = numberOneVal + numberTwoVal;
	drawEchart();
};
watch(
	() => props.devSn,
	n => {
		getDataList();
	}
);
</script>

<style scoped lang="scss">
.alarm-content {
	width: 100%;
	height: 100%;
}
</style>