270 lines
7.1 KiB
Vue
270 lines
7.1 KiB
Vue
<template>
|
|
<Card title="告警数据对比">
|
|
<div class="sewage-top-right">
|
|
<div class="electricity-icon">
|
|
<div class="text">电导率</div>
|
|
</div>
|
|
<div class="water-icon">
|
|
<div class="text">{{COMPANY == 'ztsyj' ? '水位' : '水温' }}</div>
|
|
</div>
|
|
<div class="electricity-detail">
|
|
<div class="detail-left">
|
|
<div class="title">
|
|
<span>实时值</span>
|
|
<span
|
|
v-if="meterRead.conductivityRate > 0"
|
|
class="trend"
|
|
style="color: #81f279"
|
|
>{{ meterRead.conductivityRate || 0 }}% ↑</span>
|
|
<span
|
|
v-if="meterRead.conductivityRate < 0"
|
|
class="trend"
|
|
>{{ meterRead.conductivityRate || 0 }}% ↓</span>
|
|
<!-- <span v-if="meterRead.conductivityRate == 0" class="trend" style="color: #81f279">{{ meterRead.conductivityRate || 0 }}%</span> -->
|
|
</div>
|
|
<div class="num">
|
|
<div class="text" v-if="COMPANY == 'ztsyj'">
|
|
{{ EntityMap.conductivity
|
|
|| 0 }}
|
|
</div>
|
|
<div class="text" v-else>{{ meterRead.conductivity || 0 }}</div>
|
|
<div class="unit">μS/cm</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail-right">
|
|
<div class="title">安全阈值</div>
|
|
<div class="num">
|
|
<div
|
|
class="text"
|
|
>{{ thresholdData.conductivityLowAlarm || 0 }} - {{ thresholdData.conductivityHighAlarm || 0 }}</div>
|
|
<div class="unit">μS/cm</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="electricity-detail" style="margin-top: 5%">
|
|
<div class="detail-left">
|
|
<div class="title">
|
|
<span>实时值</span>
|
|
<span
|
|
v-if="meterRead.waterTemperatureRate > 0"
|
|
class="trend"
|
|
style="color: #81f279"
|
|
>{{ meterRead.waterTemperatureRate || 0 }}% ↑</span>
|
|
<span
|
|
v-if="meterRead.waterTemperatureRate < 0"
|
|
class="trend"
|
|
>{{ meterRead.waterTemperatureRate || 0 }}% ↓</span>
|
|
<!-- <span v-if="meterRead.waterTemperature == 0" class="trend" style="color: #81f279">{{ meterRead.waterTemperature || 0 }}%</span> -->
|
|
</div>
|
|
<div class="num">
|
|
<div class="text" v-if="COMPANY == 'ztsyj'">
|
|
{{ EntityMap.waterlevel
|
|
|| 0 }}
|
|
</div>
|
|
<div class="text" v-else>{{ meterRead.waterTemperature || "--" }}</div>
|
|
<div class="unit" style="margin-top: 12%">{{COMPANY == 'ztsyj' ? 'm' : '°C' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail-right">
|
|
<div class="title">安全阈值</div>
|
|
<div class="num">
|
|
<div
|
|
v-if="COMPANY == 'ztsyj'"
|
|
class="text"
|
|
>{{ thresholdData.waterLevelLowAlarm || 0 }} - {{ thresholdData.waterLevelHighAlarm || 0 }}</div>
|
|
<div
|
|
v-else
|
|
class="text"
|
|
>{{ thresholdData.waterTemperatureLowAlarm || 0 }} - {{ thresholdData.waterTemperatureHighAlarm || 0 }}</div>
|
|
|
|
<div class="unit">{{COMPANY == 'ztsyj' ? 'm' : '°C' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
|
import { getWaringDataContrast, sewageWarnThresholdList } from "@/api/modules/greenConstruct";
|
|
import { GlobalStore } from "@/stores";
|
|
import { COMPANY } from "@/config/config";
|
|
|
|
const store = GlobalStore();
|
|
|
|
import { MapViewdata } from "@/stores/modules/map3D";
|
|
const EntityMap = MapViewdata();
|
|
|
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
|
|
|
let meterId = ref("" as any);
|
|
// 获取实时数据
|
|
const meterRead = ref({} as any);
|
|
const getMeterTotal = async () => {
|
|
const res: any = await getWaringDataContrast({ projectSn: store.sn, devSn: meterId.value });
|
|
console.log("告警数据对比", res);
|
|
if (res.result) {
|
|
meterRead.value = res.result;
|
|
} else {
|
|
meterRead.value = {};
|
|
}
|
|
};
|
|
|
|
let thresholdData = ref({}) as any;
|
|
|
|
const sewageWarnThreshold = async () => {
|
|
const res: any = await sewageWarnThresholdList({ projectSn: store.sn, devSn: meterId.value });
|
|
console.log("告警数据对比", res);
|
|
if (res.result) {
|
|
thresholdData.value = res.result[0];
|
|
} else {
|
|
thresholdData.value = {};
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
mitts.on("sewageMonitorId", e => {
|
|
// console.log("当前设备对应的devSn", e);
|
|
// console.log("============EntityMap===========", EntityMap.waterlevel);
|
|
// console.log("============EntityMap===========", EntityMap.conductivity);
|
|
|
|
meterId.value = e;
|
|
getMeterTotal();
|
|
sewageWarnThreshold();
|
|
});
|
|
// getMeterTotal();
|
|
});
|
|
|
|
onBeforeUnmount(async () => {
|
|
mitts.off("sewageMonitorId");
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.sewage-top-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.electricity-icon {
|
|
width: 27%;
|
|
height: 40%;
|
|
top: 5%;
|
|
left: 10%;
|
|
position: absolute;
|
|
background: url("@/assets/images/sewageMonitor/rightIcon1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.text {
|
|
position: absolute;
|
|
font-size: 18px;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
bottom: 12%;
|
|
left: 22%;
|
|
}
|
|
}
|
|
.water-icon {
|
|
width: 27%;
|
|
height: 40%;
|
|
bottom: 10%;
|
|
left: 10%;
|
|
position: absolute;
|
|
background: url("@/assets/images/sewageMonitor/rightIcon2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.text {
|
|
position: absolute;
|
|
font-size: 18px;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
bottom: 12%;
|
|
left: 30%;
|
|
}
|
|
}
|
|
.electricity-detail {
|
|
display: flex;
|
|
width: 50%;
|
|
padding-top: 10%;
|
|
margin-left: 35%;
|
|
justify-content: space-between;
|
|
.detail-left {
|
|
width: 50%;
|
|
.title {
|
|
font-size: 24px;
|
|
white-space: nowrap;
|
|
font-family: OPPOSans-Regular, OPPOSans;
|
|
color: #ffffff;
|
|
.trend {
|
|
color: #ec6266;
|
|
font-size: 12px;
|
|
padding: 0 6%;
|
|
background: url("@/assets/images/sewageMonitor/trendBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.num {
|
|
display: flex;
|
|
margin-top: 3%;
|
|
white-space: nowrap;
|
|
.text {
|
|
transform: skew(-10deg);
|
|
font-size: 32px;
|
|
font-family: OPPOSans-Bold, OPPOSans;
|
|
font-weight: bold;
|
|
line-height: 38px;
|
|
background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.unit {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
margin-top: 10%;
|
|
margin-left: 10%;
|
|
}
|
|
}
|
|
}
|
|
.detail-right {
|
|
width: 200px;
|
|
margin-left: 50px;
|
|
.title {
|
|
font-size: 24px;
|
|
font-family: OPPOSans-Regular, OPPOSans;
|
|
color: #ffffff;
|
|
white-space: nowrap;
|
|
.trend {
|
|
color: #ec6266;
|
|
font-size: 12px;
|
|
padding: 0 6%;
|
|
background: url("@/assets/images/sewageMonitor/trendBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.num {
|
|
display: flex;
|
|
margin-top: 8%;
|
|
white-space: nowrap;
|
|
.text {
|
|
transform: skew(-10deg);
|
|
font-size: 32px;
|
|
font-family: OPPOSans-Bold, OPPOSans;
|
|
font-weight: bold;
|
|
line-height: 38px;
|
|
background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.unit {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
margin-top: 18%;
|
|
margin-left: 10%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|