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="'WaterShortTrend'"
|
||
:lineSmooth="0"
|
||
style="width: 100%; height: 100%"
|
||
></greenLineEchart>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Card from "@/components/card.vue";
|
||
import { getWaterUseTrend } 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([] as any);
|
||
// Y轴数据
|
||
let yData = ref([] 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 getWaterUseTrend({ projectSn: store.sn, type: checked.value, waterMeterNo: 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("waterId", e => {
|
||
// console.log("当前水表对应短期趋势", e);
|
||
meterId.value = e;
|
||
getShortTrend();
|
||
});
|
||
// getShortTrend();
|
||
});
|
||
|
||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||
onBeforeUnmount(async () => {
|
||
mitts.off("waterId");
|
||
});
|
||
</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>
|