zhgdlarge/src/views/sevenLargeScreen/largeMachinery/pressureTestMachine/bottomLeft.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="pressType" ref="pressType" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { countTestType } from "@/api/modules/largeMachinery";
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue";
const store = GlobalStore();
const airTypeText = ref([
	"水泥净浆物理性能试验",
	"水泥净浆立方体抗压强度试验",
	"水泥净浆抗压试验",
	"钢筋焊接接头试验",
	"复检钢筋焊接接头试验",
	"钢筋机械连接接头试验"
]);
const airTypeData = ref([89, 25, 89, 20, 25, 89]);
let option = ref({} as any);
let totalValue = ref(0 as any);

function initOption() {
	totalValue.value = airTypeData.value.reduce((acc, curr) => acc + curr, 0);
	option.value = {
		grid: {
			left: "5%",
			right: "5%",
			bottom: "5%",
			top: "5%"
			// 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, 10, 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, 0, 10, 0],
					lineHeight: "20",
					textStyle: {
						fontSize: "12"
					},
					rich: {
						color1: {
							width: 20,
							color: "#ffffff"
						},
						color2: {
							width: 100,
							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 `{color2|${val}}` + `{color1|次}`;
					}
				},
				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: 3,
						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("pressType");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	// console.log("统计类型", airTypeText.value);
	// console.log("统计数据", airTypeData.value);
	// console.log("最大值", totalValue.value);

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

//获取告警统计
const getWarnAlarmTotal = async () => {
	const res: any = await countTestType({ projectSn: store.sn, type: 1 });
	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();
};

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>