174 lines
4.6 KiB
Vue
174 lines
4.6 KiB
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>
|