136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<template>
|
|
<Card title="短期用电趋势">
|
|
<div class="ai-top-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>
|
|
-->
|
|
<greenLineEchart
|
|
:xData="xData"
|
|
:yData="yData"
|
|
:lineId="'electricityShortTrend'"
|
|
:lineSmooth="0"
|
|
style="width: 100%; height: 100%"
|
|
></greenLineEchart>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Card from "@/components/card.vue";
|
|
import { getElectricityUseTrend } from "@/api/modules/greenConstruct";
|
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
|
import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.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 yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
|
|
|
|
// 选中
|
|
let checked = ref(1);
|
|
function getWeekData(type: any) {
|
|
checked.value = type;
|
|
getShortTrend();
|
|
}
|
|
function getMonthData(type: any) {
|
|
checked.value = type;
|
|
getShortTrend();
|
|
}
|
|
let meterId = ref("" as any);
|
|
const getShortTrend = async () => {
|
|
const res: any = await getElectricityUseTrend({ projectSn: store.sn, type: checked.value, ammeterNo: meterId.value });
|
|
xData.value = res.result.map((item: any) => item.x);
|
|
yData.value = res.result.map((item: any) => item.y);
|
|
console.log("获取短期趋势", res);
|
|
};
|
|
|
|
onMounted(async () => {
|
|
mitts.on("electricId", e => {
|
|
// console.log("当前电表对应短期趋势", e);
|
|
meterId.value = e;
|
|
getShortTrend();
|
|
});
|
|
getShortTrend();
|
|
});
|
|
|
|
//
|
|
onBeforeUnmount(async () => {
|
|
mitts.off("electricId");
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ai-top-left {
|
|
width: 100%;
|
|
height: 100%;
|
|
.title {
|
|
height: 10%;
|
|
line-height: 33px;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
background: url("@/assets/images/titleBig.webp") no-repeat;
|
|
background-size: 100% 100%;
|
|
i {
|
|
font-family: OPPOSansH;
|
|
margin-left: 6%;
|
|
}
|
|
}
|
|
.history-content {
|
|
height: 100%;
|
|
// background: url("@/assets/images/cardImg.png") no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
.select-right {
|
|
width: 20%;
|
|
display: flex;
|
|
position: absolute;
|
|
z-index: 10;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
right: -5%;
|
|
top: 5%;
|
|
.selected {
|
|
height: 5%;
|
|
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
.week {
|
|
width: 30%;
|
|
margin-right: 5%;
|
|
z-index: 99;
|
|
}
|
|
.month {
|
|
width: 30%;
|
|
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>
|