zhgdlarge/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topRight.vue

<template>
	<Card title="告警统计">
		<div class="ai-top-right">
			<div>
				<div class="select-right">
					<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
					<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
					<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
				</div>
			</div>
			<div id="AIWarnTotal" ref="AIWarnTotal" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getAlarmTotal } from "@/api/modules/aIEarlyWarn";
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue";
const store = GlobalStore();
// 当前告警统计类型
let warnTotalType = ref(4 as any);

// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	warnTotalType.value = 4;
	getWarnAlarmTotal();
}
function getWeekData(type: any) {
	checked.value = type;
	warnTotalType.value = 1;
	getWarnAlarmTotal();
}
function getMonthData(type: any) {
	checked.value = type;
	warnTotalType.value = 2;
	getWarnAlarmTotal();
}
const airTypeText = ref([
	"烟感报警",
	"明火报警",
	"人员倒地报警",
	"未带安全帽报警",
	"区域入侵报警",
	"越界入侵报警",
	"人员聚集报警"
]);
const airTypeData = ref([89, 25, 89, 20, 25, 89, 20]);
let option = ref({} as any);
let totalValue = ref(0 as any);

function initOption() {
	option.value = {
		grid: {
			left: "5%",
			right: "5%",
			bottom: "5%",
			top: "15%"
			// containLabel: true
		},
		// backgroundColor: '#101129',
		xAxis: {
			show: false,
			type: "value",
			max: totalValue.value
		},
		yAxis: [
			{
				type: "category",
				inverse: true,
				axisLabel: {
					show: true,
					inside: true,
					verticalAlign: "bottom",
					padding: [0, 0, 5, 5],
					lineHeight: "20",
					textStyle: {
						color: "#FFFFFF",
						fontSize: "14"
					}
					// formatter: function (val, index) {
					// 	console.log("val", val, index);
					// 	return val;
					// }
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				data: airTypeText.value
			},
			{
				inverse: true,
				axisTick: "none",
				axisLine: "none",
				axisLabel: {
					inside: true,
					verticalAlign: "bottom",
					padding: [0, 20, 10, 0],
					lineHeight: "20",
					textStyle: {
						fontSize: "12"
					},
					rich: {
						color1: {
							color: "#ffffff"
						},
						color2: {
							color: "#4CC4F8"
						}
					},
					formatter: function (val, index) {
						// console.log("val", val, index);
						if (totalValue.value === 0) {
							totalValue.value = 1;
						}
						let result = (val / totalValue.value) * 100;
						let percentage = result.toFixed(2) + "%";
						return `{color1|${val}}` + `{color2|(${percentage})%}`;
					}
				},
				data: airTypeData.value
			},
			{
				type: "category",
				inverse: true,
				axisTick: "none",
				axisLine: "none",
				show: true,
				data: airTypeData.value
			}
		],
		series: [
			{
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "#14346c",
					borderRadius: 30
				},
				label: {
					show: false,
					// position:'right',
					// formatter:'{@score}%',
					textStyle: {
						color: "#03fcfe",
						fontSize: "12"
					}
				},
				itemStyle: {
					normal: {
						barBorderRadius: 10,
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
							{
								offset: 0,
								color: "#194077"
							},
							{
								offset: 1,
								color: "#4CC4F8"
							}
						])
					}
				},
				barWidth: 3,
				data: airTypeData.value
			},
			{
				name: "内圆",
				type: "scatter",
				stack: "圆",
				yAxisIndex: 0,
				data: airTypeData.value, //小白点，数据静态
				label: false,
				symbolSize: 2,
				itemStyle: {
					normal: {
						borderColor: "#fff",
						borderWidth: 4,
						color: "#fff",
						opacity: 1
					}
				},
				z: 3
			},
			{
				name: "内圆框",
				type: "scatter",
				stack: "圆",
				yAxisIndex: 0,
				data: [0, 0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
				label: false,
				symbolSize: 15,
				itemStyle: {
					normal: {
						borderColor: "#4CC4F8",
						borderWidth: 2,
						color: "#14346c",
						opacity: 1
					}
				},
				z: 2
			}
		]
	};
}

function drawChart() {
	initOption();
	let chartDom = document.getElementById("AIWarnTotal");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	// console.log("统计类型", airTypeText.value);
	// console.log("统计数据", airTypeData.value);
	// console.log("最大值", totalValue.value);

	let AIWarnTotal = echarts.init(document.getElementById("AIWarnTotal"));
	AIWarnTotal.setOption(option.value);
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}

//获取告警统计
const getWarnAlarmTotal = async () => {
	const res: any = await getAlarmTotal({ projectSn: store.sn, selectType: warnTotalType.value });
	console.log("获取告警统计", res.result);
	let dataList = res.result.data.slice(0, 7);
	let totalNumArr = [];
	let totalTextArr = [];
	for (let i = 0; i < dataList.length; i++) {
		totalNumArr.push(Number(dataList[i].count));
		totalTextArr.push(dataList[i].name);
	}
	airTypeText.value = totalTextArr;
	airTypeData.value = totalNumArr;
	totalValue.value = airTypeData.value.reduce((acc, curr) => acc + curr, 0);
	drawChart();
};
//将方法暴露给父组件
defineExpose({
	getWarnAlarmTotal
})
onMounted(async () => {
	getWarnAlarmTotal();
});
</script>

<style lang="scss" scoped>
.ai-top-right {
	width: 100%;
	height: 100%;
	position: relative;
}
.select-right {
	width: 25%;
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	right: -1%;
	top: 5%;
	.selected {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.day {
		padding: 0 6%;
		margin-right: 5%;
		z-index: 99;
	}
	.week {
		padding: 0 6%;
		margin-right: 5%;
		z-index: 99;
	}
	.month {
		padding: 0 6%;
		z-index: 99;
	}
	.active {
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
</style>