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

<template>
	<Card title="环境风速(m/s)">
		<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="'gantryWindSpeed'"
					: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(["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"] as any);
// Y轴单位
// let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 5, 25, 20, 15, 25, 12] as any);
// 图表数据项
// let option = ref(null as any);
// 图标偏移度
let lineGrid = ref({
	top: "10%",
	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 month = ("0" + (date.getMonth() + 1)).slice(-2);
// 		const day = ("0" + date.getDate()).slice(-2);
// 		dates.unshift(`${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(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);

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

// 	return dates;
// }

onMounted(async () => {});

// 即时销毁事件总线派发，否则会执行两次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>