zhgdlarge/src/views/sevenLargeScreen/largeMachinery/waterStabilizedMixer/bottomLeft.vue

<template>
	<Card title="各配比产量（t）">
		<div class="load-top-left">
			<div>
				<div class="select-right">
					<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</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 class="notoDta" v-if="xData.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
			<div id="concreteEchartsBottomLeft" ref="concreteEchartsBottomLeft" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
import { countPowerLevel3 } from "@/api/modules/largeMachinery";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	getMemberCareList();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	getMemberCareList();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	getMemberCareList();
}
// x轴
let xData = ref([] as any);
// Y轴单位
let unit = ref("" as any);
// Y轴数据
let yData = ref([] as any);

// 图表数据项
let option = ref(null as any);

function initOption() {
	option.value = {
		grid: {
			top: "15%",
			bottom: "10%" //也可设置left和right设置距离来控制图表的大小
		},
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 0.9)",
			borderColor: "#010306",
			textStyle: {
				color: "#FFFFFF"
			},
			axisPointer: {
				lineStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: "rgba(0, 255, 233,0)"
							},
							{
								offset: 0.5,
								color: "rgba(255, 255, 255,1)"
							},
							{
								offset: 1,
								color: "rgba(0, 255, 233,0)"
							}
						],
						global: false
					}
				}
			}
			// formatter: function (params) {
			// 	// console.log("tooltip", params);
			// 	return (
			// 		params[0].name +
			// 		"<br/>" +
			// 		params[0].marker +
			// 		" " +
			// 		params[0].seriesName +
			// 		": " +
			// 		params[0].value +
			// 		"<br/>" +
			// 		params[1].marker +
			// 		" " +
			// 		params[1].seriesName +
			// 		": " +
			// 		params[1].value
			// 	);
			// }
		},
		xAxis: {
			data: xData.value,
			axisLine: {
				show: false //隐藏X轴轴线
			},
			axisTick: {
				show: false //隐藏X轴刻度
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: "#FFFFFF" //X轴文字颜色
				}
			}
		},
		yAxis: [
			{
				type: "value",
				nameTextStyle: {
					color: "#FFFFFF"
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: "#FFFFFF"
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: "#FFFFFF"
					}
				}
			}
		],
		series: [
			{
				type: "bar",
				barWidth: 15,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "#00FFE3"
							},
							{
								offset: 1,
								color: "#4693EC"
							}
						])
					}
				},
				data: yData.value
			}
		]
	};
}

function drawChart() {
	initOption();
	// console.log("绘制前数据", yData.value);
	let chartDom = document.getElementById("concreteEchartsBottomLeft");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let concreteEchartsBottomLeft = echarts.init(document.getElementById("concreteEchartsBottomLeft"));
	concreteEchartsBottomLeft.setOption(option.value);
}
onMounted(async () => {});

// 获取 各配比产量
// const realTimeTotal = ref({}) as any;
const getMemberCareList = async () => {
	const res: any = await countPowerLevel3({ projectSn: store.sn, type: checked.value });
	console.log("各配比产量", res);
	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));
		drawChart();
	} else {
		xData.value = []
		yData.value = []
		let chartDom = document.getElementById("concreteEchartsBottomLeft");
		if (chartDom) {
			chartDom.removeAttribute("_echarts_instance_");
		}
		let concreteEchartsBottomLeft = echarts.init(document.getElementById("concreteEchartsBottomLeft"));
		concreteEchartsBottomLeft.clear();
	}
};

onMounted(async () => {
	getMemberCareList();
});
</script>

<style lang="scss" scoped>
.notoDta {
	top: 30%;
	width: 45%;
	left: 30%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 37%;
	}
}
.load-top-left {
	width: 100%;
	height: 100%;
	padding-left: 3%;
	padding-top: 3%;
	position: relative;
	.select-right {
		width: 40%;
		display: flex;
		position: absolute;
		z-index: 10;
		color: #fff;
		font-size: 10px;
		text-align: center;
		line-height: 20px;
		right: 2%;
		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>