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

<template>
	<Card title="工作时长分析(h)">
		<div class="gantry-bottom-left">
			<div class="history-content">
				<div>
					<div class="select-right">
						<div class="week selected" @click="getWeekData(1)" :class="checked == 1 ? 'active' : ''">近7日</div>
						<div class="month selected" @click="getMonthData(2)" :class="checked == 2 ? 'active' : ''">本月</div>
					</div>
				</div>
				<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
				 -->
				<blueLineEchart
					:xData="xData"
					:yData="yData"
					:lineId="'gantryWorkTime'"
					:lineSmooth="0"
					:grid="lineGrid"
					style="width: 100%; height: 100%"
				></blueLineEchart>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
// Y轴单位
// let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
// 图表数据项
// let option = ref(null as any);
// 图标偏移度
let lineGrid = ref({
	top: "20%",
	left: "10%",
	right: "8%",
	bottom: "10%"
});

// 选中
let checked = ref(1);
function getWeekData(type: any) {
	checked.value = type;
	let currentWeek = getRecentSevenDays();
	// console.log(currentWeek, "近七天");
	// 模拟数据改变
	xData.value = currentWeek;
	yData.value = [20, 15, 25, 15, 25, 35, 12];
}
function getMonthData(type: any) {
	checked.value = type;
	let currentWeek = getPassedDaysOfMonth();
	// console.log(currentWeek.length, "本月");
	let testyData: any = [];
	for (let i = 0; i < currentWeek.length; i++) {
		testyData.push((i % 2) + 10);
	}
	xData.value = currentWeek;
	yData.value = testyData;
}

//获取近七天的日期
function getRecentSevenDays() {
	const dates: any = [];
	const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
	const today = new Date(); // 当前日期

	for (let i = 0; i < 7; i++) {
		const date = new Date(today.getTime() - i * millisecondsPerDay);
		// 获取年
		const year = today.getFullYear();
		const month = ("0" + (date.getMonth() + 1)).slice(-2);
		const day = ("0" + date.getDate()).slice(-2);
		dates.unshift(`${year}-${month}-${day}`);
	}
	return dates;
}

// 获取本月到今天的日期
function getPassedDaysOfMonth() {
	// 存放数据的数组
	const dates: any = [];
	// 获取当前时间的时间戳
	const today = new Date();
	// 获取年
	const year = today.getFullYear();
	// 获取月
	const month = today.getMonth();
	// 获取当前月份第一天的时间戳
	const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月

	let currentDate = startDate;
	// 遍历从这个月第一天到现在的日期数
	while (currentDate <= today) {
		const month = currentDate.getMonth() + 1;
		const day = currentDate.getDate();
		dates.push(`${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);

		currentDate.setDate(currentDate.getDate() + 1);
	}

	return dates;
}

onMounted(async () => {
	getWeekData(1);
});

// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
	mitts.off("devSn");
});
</script>

<style lang="scss" scoped>
.gantry-bottom-left {
	width: 100%;
	height: 100%;
	.history-content {
		height: 100%;
		// background: url("@/assets/images/cardImg.png") no-repeat;
		// background-size: 100% 100%;
		position: relative;
		.select-right {
			width: 25%;
			display: flex;
			position: absolute;
			z-index: 10;
			color: #fff;
			font-size: 10px;
			text-align: center;
			line-height: 20px;
			right: 0%;
			top: 5%;
			.selected {
				height: 5%;
				background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
				background-size: 100% 100%;
				cursor: pointer;
			}
			.week {
				width: 40%;
				margin-right: 5%;
				z-index: 99;
			}
			.month {
				width: 40%;
				margin-right: 5%;
				z-index: 99;
			}
			.active {
				background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
				background-size: 100% 100%;
			}
		}
	}
}
::v-deep .el-input__wrapper {
	background: #112d59;
}
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
</style>