312 lines
8.6 KiB
Vue
312 lines
8.6 KiB
Vue
<template>
|
|
<Card title="作业数据">
|
|
<div class="gantry-bottom-center">
|
|
<div class="work-data-box">
|
|
<div class="work-data-item">
|
|
<div class="left-contain">
|
|
<div class="contain-title">大车</div>
|
|
<div class="contain-row">
|
|
<div class="text">行程</div>
|
|
<div class="num">{{ currentData.largeCraneRange || 0 }} m</div>
|
|
<div
|
|
class="state"
|
|
v-if="alarmData && alarmData.largeCarRangePreAlarm != null"
|
|
:style="{
|
|
background: tripTypeEnum[alarmData.largeCarRangePreAlarm].color
|
|
}"
|
|
>
|
|
{{ tripTypeEnum[alarmData.largeCarRangePreAlarm].tripType }}
|
|
</div>
|
|
</div>
|
|
<div class="contain-row">
|
|
<div class="text">速度</div>
|
|
<div class="num">{{ currentData.largeCraneSpeed || 0 }} m/s</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-contain">
|
|
<div class="contain-title">小车1</div>
|
|
<div class="contain-row">
|
|
<div class="text">行程</div>
|
|
<div class="num">{{ currentData.smallCraneRange || 0 }} m</div>
|
|
<div
|
|
class="state"
|
|
v-if="alarmData && alarmData.smallCarRangePreAlarm != null"
|
|
:style="{
|
|
background: tripTypeEnum[alarmData.smallCarRangePreAlarm].color
|
|
}"
|
|
>
|
|
{{ tripTypeEnum[alarmData.smallCarRangePreAlarm].tripType }}
|
|
</div>
|
|
</div>
|
|
<div class="contain-row">
|
|
<div class="text">速度</div>
|
|
<div class="num">{{ currentData.smallCraneSpeed || 0 }} m/s</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-contain">
|
|
<div class="contain-title">小车2</div>
|
|
<div class="contain-row">
|
|
<div class="text">行程</div>
|
|
<div class="num">{{ currentData.secondSmallCraneRange || 0 }} m</div>
|
|
<div
|
|
class="state"
|
|
v-if="alarmData && alarmData.secondSmallCarRangePreAlarm != null"
|
|
:style="{
|
|
background: tripTypeEnum[alarmData.secondSmallCarRangePreAlarm].color
|
|
}"
|
|
>
|
|
{{ tripTypeEnum[alarmData.secondSmallCarRangePreAlarm].tripType }}
|
|
</div>
|
|
</div>
|
|
<div class="contain-row">
|
|
<div class="text">速度</div>
|
|
<div class="num">{{ currentData.secondSmallCraneSpeed || 0 }} m/s</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="work-data-bottom">
|
|
<div class="right-contain">
|
|
<div class="contain-title">小车1主钩</div>
|
|
<div class="contain-row">
|
|
<div class="text">吊量</div>
|
|
<div class="num">{{ currentData.smallCraneMainHookLoad || 0 }} t</div>
|
|
<div
|
|
class="state"
|
|
v-if="alarmData && alarmData.masterHookWeightAlarm != null"
|
|
:style="{
|
|
background: tripTypeEnum[alarmData.masterHookWeightAlarm].color
|
|
}"
|
|
>
|
|
{{ tripTypeEnum[alarmData.masterHookWeightAlarm].tripType }}
|
|
</div>
|
|
</div>
|
|
<div class="contain-row">
|
|
<div class="text">高度</div>
|
|
<div class="num">{{ currentData.smallCraneMainHookHeight || 0 }} m</div>
|
|
<!-- <div class="state">正常</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="right-contain">
|
|
<div class="contain-title">小车1副钩</div>
|
|
<div class="contain-row">
|
|
<div class="text">吊量</div>
|
|
<div class="num">{{ currentData.smallCraneAuxiliaryHookLoad || 0 }} t</div>
|
|
<div
|
|
class="state"
|
|
v-if="alarmData && alarmData.subHookWeightAlarm != null"
|
|
:style="{
|
|
background: tripTypeEnum[alarmData.subHookWeightAlarm].color
|
|
}"
|
|
>
|
|
{{ tripTypeEnum[alarmData.subHookWeightAlarm].tripType }}
|
|
</div>
|
|
</div>
|
|
<div class="contain-row">
|
|
<div class="text">高度</div>
|
|
<div class="num">{{ currentData.smallCraneAuxiliaryHookHeight || 0 }} m</div>
|
|
<!-- <div class="state">正常</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="right-contain">
|
|
<div class="contain-title">小车2主钩</div>
|
|
<div class="contain-row">
|
|
<div class="text">吊量</div>
|
|
<div class="num">{{ currentData.secondSmallCraneMainHookLoad || 0 }} t</div>
|
|
<div
|
|
class="state"
|
|
v-if="alarmData && alarmData.secondMasterHookWeightAlarm != null"
|
|
:style="{
|
|
background: tripTypeEnum[alarmData.secondMasterHookWeightAlarm].color
|
|
}"
|
|
>
|
|
{{ tripTypeEnum[alarmData.secondMasterHookWeightAlarm].tripType }}
|
|
</div>
|
|
</div>
|
|
<div class="contain-row">
|
|
<div class="text">高度</div>
|
|
<div class="num">{{ currentData.secondSmallCraneMainHookHeight || 0 }} m</div>
|
|
<!-- <div class="state">正常</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="right-contain">
|
|
<div class="contain-title">小车2副钩</div>
|
|
<div class="contain-row">
|
|
<div class="text">吊量</div>
|
|
<div class="num">{{ currentData.secondSmallCraneAuxiliaryHookLoad || 0 }} t</div>
|
|
<div
|
|
class="state"
|
|
v-if="alarmData && alarmData.secondSubHookWeightAlarm != null"
|
|
:style="{
|
|
background: tripTypeEnum[alarmData.secondSubHookWeightAlarm].color
|
|
}"
|
|
>
|
|
{{ tripTypeEnum[alarmData.secondSubHookWeightAlarm].tripType }}
|
|
</div>
|
|
</div>
|
|
<div class="contain-row">
|
|
<div class="text">高度</div>
|
|
<div class="num">{{ currentData.secondSmallCraneAuxiliaryHookHeight || 0 }} m</div>
|
|
<!-- <div class="state">正常</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Card from "@/components/card.vue";
|
|
import { getGantryCraneCurrentData, getGantryCraneAlarm } from "@/api/modules/gantryCrane";
|
|
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
|
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
|
import { GlobalStore } from "@/stores";
|
|
const store = GlobalStore();
|
|
|
|
let currentData = ref({});
|
|
// 实时数据
|
|
const getGantryCurrentData = async () => {
|
|
const res: any = await getGantryCraneCurrentData({ projectSn: store.sn, devSn: gantryCraneDevSn.value });
|
|
console.log("实时数据", res);
|
|
currentData.value = res.result;
|
|
};
|
|
// 报警数据
|
|
let alarmData = ref({}) as any;
|
|
const getGantryAlarmData = async () => {
|
|
const res: any = await getGantryCraneAlarm({ projectSn: store.sn, devSn: gantryCraneDevSn.value });
|
|
if (res.result) {
|
|
alarmData.value = res.result;
|
|
} else {
|
|
alarmData.value = null;
|
|
}
|
|
console.log("报警数据", alarmData.value);
|
|
};
|
|
|
|
// 报警状态 0: 正常1: 报警
|
|
let tripTypeEnum = ref([
|
|
{
|
|
value: 0,
|
|
tripType: "正常",
|
|
color: "#48da39"
|
|
},
|
|
{
|
|
value: 1,
|
|
tripType: "报警",
|
|
color: "#ec6266"
|
|
}
|
|
]);
|
|
|
|
let gantryCraneDevSn = ref("") as any;
|
|
onMounted(async () => {
|
|
mitts.on("gantryCraneDevSn", e => {
|
|
console.log("作业数据接收值", e);
|
|
gantryCraneDevSn.value = e;
|
|
getGantryCurrentData();
|
|
getGantryAlarmData();
|
|
// gerUserVideo();
|
|
// setTimeout(() => {
|
|
// gerUserVideo();
|
|
// }, 500);
|
|
});
|
|
});
|
|
//
|
|
onBeforeUnmount(async () => {
|
|
mitts.off("gantryCraneDevSn");
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.gantry-bottom-center {
|
|
width: 100%;
|
|
height: 100%;
|
|
.work-data-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
.work-data-item {
|
|
padding-top: 3%;
|
|
height: 40%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.left-contain {
|
|
width: 30%;
|
|
box-sizing: border-box;
|
|
padding: 1% 2%;
|
|
background: url("@/assets/images/gantryCrane/workBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.right-contain {
|
|
width: 30%;
|
|
box-sizing: border-box;
|
|
padding: 1% 2%;
|
|
background: url("@/assets/images/gantryCrane/workBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.contain-title {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
margin-top: 2%;
|
|
}
|
|
.contain-row {
|
|
display: flex;
|
|
color: #a1accb;
|
|
font-size: 12px;
|
|
margin-top: 10%;
|
|
.text {
|
|
width: 20%;
|
|
}
|
|
.num {
|
|
width: 30%;
|
|
white-space: nowrap;
|
|
}
|
|
.state {
|
|
width: 30%;
|
|
padding: 1% 0;
|
|
margin-left: 22%;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: #48da39;
|
|
}
|
|
}
|
|
}
|
|
.work-data-bottom {
|
|
padding-top: 3%;
|
|
height: 40%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.right-contain {
|
|
width: 23%;
|
|
box-sizing: border-box;
|
|
padding: 1% 2%;
|
|
background: url("@/assets/images/gantryCrane/workBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.contain-title {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
margin-top: 8%;
|
|
}
|
|
.contain-row {
|
|
display: flex;
|
|
color: #a1accb;
|
|
font-size: 12px;
|
|
margin-top: 15%;
|
|
.text {
|
|
width: 30%;
|
|
}
|
|
.num {
|
|
white-space: nowrap;
|
|
}
|
|
.state {
|
|
width: 40%;
|
|
margin-left: 20%;
|
|
padding: 1% 0;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: #48da39;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|