zhgdlarge/src/views/sevenLargeScreen/largeMachinery/intelligentGrout/topRight.vue

<template>
	<Card title="各梁型压浆情况">
		<div class="leftBox">
			<div id="echartsLeftBottom" style="width: 100%; height: 100%"></div>
			<div class="notoDta" v-if="noData">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, onBeforeUnmount, ref } from "vue";
import { countBeamType2 } from "@/api/modules/largeMachinery";
import * as echarts from "echarts";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { GlobalStore } from "@/stores";
const store = GlobalStore();

let yData = ref([] as any);
let xData = ref([] as any);

function draw() {
	let chartDom = document.getElementById("echartsLeftBottom");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let echartsTest = echarts.init(document.getElementById("echartsLeftBottom"));
	let option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
			},
			borderRadius: 5,
			borderWidth: 5,
			formatter: function (params) {
				let dot =
					'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
				return params[0].name + "<br>" + params[0].value;
			}
		},
		grid: {
			left: "4%",
			right: "4%",
			bottom: "5%",
			top: "15%",
			containLabel: true
		},
		xAxis: {
			show: false,
			data: xData.value,
			triggerEvent: true,
			axisTick: {
				show: false,
				lineStyle: {
					color: "red"
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				rotate: 0,
				interval: 0,
				textStyle: {
					padding: [0, 0, 0, 0],
					fontSize: 12,
					color: "#fff"
				}
			}
		},
		yAxis: {
			triggerEvent: true,
			nameTextStyle: {
				color: "#fff",
				fontSize: 10,
				padding: [0, 0, 10, 0]
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: "#fff",
					fontSize: 12
				}
			}
		},
		dataZoom: [
			{
				type: "slider",
				start: 0,
				end: 50, // 控制缩略轴默认展示的数据范围
				show: true, //显示滚动条
				height: 0,
				bottom: "8%",
				showDetail: false,
				moveHandleStyle: {
					color: "#4AC0F3"
				},
				backgroundColor: "#193C8D"
			}
		],
		// color: ["#e54035"],
		series: [
			{
				name: "数量",
				// barMinHeight: 10,
				barWidth: 80,
				type: "pictorialBar",
				barCategoryGap: "5%",
				// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
				itemStyle: {
					normal: {
						//barBorderRadius: 5,
						//渐变色
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 1,
								color: "rgba(130, 251, 234, 0)"
							},
							{
								offset: 0,
								color: "rgba(130, 251, 234, 1)"
							}
						])
					}
				},
				label: {
					normal: {
						show: true,
						position: "top",
						textStyle: {
							color: "#fff",
							fontSize: 12
						}
					}
				},
				data: yData.value,
				z: 10
			},
			{
				name: "hill",
				type: "line",
				color: "rgba(0,0,0,0)",
				symbol: `image://${symbolIcon}`,
				symbolSize: 20,
				itemStyle: {
					normal: {
						// color: "rgba(11,47,68,.8)"
					}
				},
				data: yData.value,
				z: 9
			}
		]
	};
	echartsTest.setOption(option);
}
let noData = ref(false as any);
// 统计各梁型张拉情况
const getDutyUnit = async () => {
	const res: any = await countBeamType2({ projectSn: store.sn });

	if (res.result.data.length > 0) {
		xData.value = res.result.data.map((item: any) => item.name);
		yData.value = res.result.data.map((item: any) => Number(item.count));
		draw();
	} else {
		noData.value = true;
	}
	console.log("统计各梁型张拉情况", res);
};

onMounted(() => {
	getDutyUnit();
});
</script>

<style scoped lang="scss">
.leftBox {
	width: 100%;
	height: 100%;
	position: relative;
	.notoDta {
		top: 25%;
		width: 40%;
		left: 35%;
		position: absolute;
		text-align: center;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: calc(100vw * 14 / 1920);
			margin: -6% 37%;
		}
	}
}
</style>