401 lines
10 KiB
Vue
401 lines
10 KiB
Vue
<template>
|
||
<div class="rightBox">
|
||
<div class="title"><i>设备监控信息</i></div>
|
||
<div class="content">
|
||
<div class="selectRight">
|
||
<el-select v-model="lifeValue" class="m-2" placeholder="Select" size="small">
|
||
<el-option
|
||
v-for="(item, index) in noiseList"
|
||
:key="index"
|
||
:label="item.devName"
|
||
:value="item.id"
|
||
@click="checkItem(item.devSn)"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="contentSmall">
|
||
<div class="top">
|
||
<div class="leftTowerImg">
|
||
<div class="centerEleImg">
|
||
<img src="@/assets/images/elevatorMonitoring/elevatorBg.png" alt="" />
|
||
</div>
|
||
<div class="lineA"><img src="@/assets/images/elevatorMonitoring/lineA.png" alt="" /></div>
|
||
<div class="lineAdata">
|
||
<div>载重</div>
|
||
<div style="color: #65d7f9">{{elevatorList.loading||0}}kg</div>
|
||
</div>
|
||
<div class="lineAdata" style="left: 62%">
|
||
<div>速度</div>
|
||
<div style="color: #65d7f9">{{elevatorList.speed||0}}m/s</div>
|
||
</div>
|
||
<div class="lineB"><img src="@/assets/images/elevatorMonitoring/lineB.png" alt="" /></div>
|
||
<div class="lineBdata">
|
||
<div>X倾角</div>
|
||
<div style="color: #ec6266">{{elevatorList.dipAngleX||0}}°</div>
|
||
</div>
|
||
<div class="lineBdata" style="left: 61%">
|
||
<div>Y倾角</div>
|
||
<div style="color: #ec6266">{{elevatorList.dipAngleY}}°</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightVideo">
|
||
<div class="video">
|
||
<Monitor></Monitor>
|
||
</div>
|
||
<div class="devInfo">
|
||
<div class="leftInfo">
|
||
<div class="titleStatus">运行状态</div>
|
||
<div class="infoBox">
|
||
<div style="color: #65d7f9">人脸识别系统</div>
|
||
<div><span class="textColor"> 今日工作时长：</span>{{lifeList.workTime||0}}min</div>
|
||
<div><span class="textColor"> 今日装载次数：</span>{{lifeList.loadingNum||0}}次</div>
|
||
<div><span class="textColor"> 今日装载工效：</span>{{lifeList.loadingErgonomic||0}}kg/min</div>
|
||
<div><span class="textColor"> 今日装载重量：</span>{{lifeList.loadingWeight||0}}kg</div>
|
||
<div><span class="textColor"> 今日违章次数：</span>{{lifeList.violationNum||0}}次</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightInfo" v-for="(item,index) in driverInfo" :key="index">
|
||
<div class="titleStatus">
|
||
司机信息
|
||
<span
|
||
><img style="margin-left: 4%; width: 6%" src="@/assets/images/towerCraneMonitoring/setUp.png" alt="" />
|
||
</span>
|
||
<span style="margin-left: 6%; color: #ccc">设备信息</span>
|
||
</div>
|
||
<div class="infoBox">
|
||
<div><span class="textColor">认证状态：</span>-</div>
|
||
<div><span class="textColor"> 姓名：</span>{{ item.workerName||'未知'}}</div>
|
||
<div><span class="textColor"> 性别：</span>{{ item.sex==1?'男':item.sex==2?'女':'未知'}}</div>
|
||
<div><span class="textColor"> 年龄：</span>{{ item.age||'未知'}}</div>
|
||
<div><span class="textColor"> 工作年限：</span>{{item.workYear||0}}年</div>
|
||
<div>
|
||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
身份证号:</span
|
||
>{{ item.idCard||'未知' }}
|
||
</div>
|
||
</div>
|
||
<div class="driverPhoto"><img :src="item.imageUrl" alt="" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bottomList">
|
||
<p>上限位</p>
|
||
<p class="number">正常</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>下限位</p>
|
||
<p class="number">{{elevatorList.bottomAlarm==1?'报警':'正常'}}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>速度</p>
|
||
<p class="number">{{elevatorList.speed||0}}m/s</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>载重</p>
|
||
<p class="number">{{elevatorList.loading||0}}kg</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>X倾角</p>
|
||
<p class="number">{{elevatorList.dipAngleX||0}}°</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>Y倾角</p>
|
||
<p class="number">{{elevatorList.dipAngleY||0}}°</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>前门锁</p>
|
||
<p class="number">正常</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>后门锁</p>
|
||
<p class="number">正常</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Monitor from "@/views/sevenLargeScreen/elevatorMonitoring/eleMonitor.vue";
|
||
import {
|
||
getLifterListApi,
|
||
getNewestLifterApi,
|
||
getQueryTodayOperatingApi,
|
||
getRelatedInfoApi
|
||
} from "@/api/modules/elevator";
|
||
import { ref, reactive, onMounted } from "vue";
|
||
import { GlobalStore } from "@/stores";
|
||
const store = GlobalStore();
|
||
const lifeValue = ref("" as any);
|
||
const noiseList = ref([] as any);
|
||
let lifterDevSn = ref("" as any);
|
||
|
||
// 下拉框选中
|
||
function checkItem(val: any) {
|
||
lifterDevSn.value = val;
|
||
getLifterList()
|
||
}
|
||
|
||
//获取设备下拉列表
|
||
const getLifterList = async () => {
|
||
const res = await getLifterListApi({
|
||
projectSn: store.sn
|
||
});
|
||
if (res.result) {
|
||
noiseList.value = res.result;
|
||
lifeValue.value = res.result[0].id;
|
||
lifterDevSn.value=res.result[0].devSn
|
||
}
|
||
await getLifterData();
|
||
await getSelectTower();
|
||
await getDriverInfoList();
|
||
};
|
||
|
||
//获取升降机实时数据
|
||
let elevatorList = ref({} as any);
|
||
const getLifterData = async () => {
|
||
const res = await getNewestLifterApi({
|
||
devSn: lifterDevSn.value
|
||
});
|
||
if(res.result){
|
||
elevatorList.value=res.result
|
||
}
|
||
console.log("获取升降机实时数据", elevatorList.value);
|
||
};
|
||
|
||
//获取运行状态
|
||
let lifeList = ref({} as any);
|
||
const getSelectTower = async () => {
|
||
const res = await getQueryTodayOperatingApi({
|
||
projectSn: store.sn,
|
||
devSn:lifeValue.value
|
||
});
|
||
if (res.result) {
|
||
console.log('获取运行状态',res);
|
||
lifeList.value=res.result
|
||
}
|
||
};
|
||
|
||
//获取司机信息
|
||
let driverInfo = ref([] as any);
|
||
const getDriverInfoList = async () => {
|
||
const res = await getRelatedInfoApi({
|
||
devSn: lifterDevSn.value
|
||
});
|
||
if (res.result) {
|
||
driverInfo.value=res.result.devWorker.workerList
|
||
console.log('获取司机信息',res);
|
||
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
getLifterList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.rightBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
.title {
|
||
height: 5%;
|
||
line-height: 35px;
|
||
text-align: left;
|
||
font-size: calc(100vw * 18 / 1920);
|
||
color: #ffffff;
|
||
background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
i {
|
||
margin-left: 50px;
|
||
font-family: OPPOSansH;
|
||
}
|
||
}
|
||
.content {
|
||
height: 96%;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
display: flex;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
// .main {
|
||
// border-radius: 8px;
|
||
// flex: 1;
|
||
// height: 80vh;
|
||
// }
|
||
.selectRight {
|
||
position: absolute;
|
||
left: 68.4%;
|
||
width: 6%;
|
||
top: 18%;
|
||
z-index: 9;
|
||
}
|
||
.contentSmall {
|
||
width: 100%;
|
||
height: 92%;
|
||
margin: 4% 2%;
|
||
.top {
|
||
width: 100%;
|
||
height: 80%;
|
||
display: flex;
|
||
.leftTowerImg {
|
||
margin-right: 1%;
|
||
width: 80%;
|
||
height: 100%;
|
||
background: url("@/assets/images/towerCraneMonitoring/contentSmallImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.centerEleImg {
|
||
position: absolute;
|
||
left: 31%;
|
||
top: 20%;
|
||
img {
|
||
width: 38vw;
|
||
height: 65vh;
|
||
}
|
||
}
|
||
.lineA {
|
||
position: absolute;
|
||
top: 56vh;
|
||
left: 53vw;
|
||
img {
|
||
width: 60%;
|
||
}
|
||
}
|
||
.lineB {
|
||
position: absolute;
|
||
top: 70vh;
|
||
left: 52vw;
|
||
img {
|
||
width: 60%;
|
||
}
|
||
}
|
||
.lineAdata {
|
||
width: 4%;
|
||
height: 7%;
|
||
top: 55%;
|
||
position: absolute;
|
||
background: url("@/assets/images/towerCraneMonitoring/bottomImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 57.5%;
|
||
font-size: calc(100vw * 16 / 1920);
|
||
div {
|
||
margin: 10% 0 0 16%;
|
||
}
|
||
}
|
||
.lineBdata {
|
||
width: 4%;
|
||
height: 7%;
|
||
top: 70%;
|
||
position: absolute;
|
||
background: url("@/assets/images/elevatorMonitoring/redWanning.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 56.5%;
|
||
font-size: calc(100vw * 16 / 1920);
|
||
div {
|
||
margin: 10% 0 0 16%;
|
||
}
|
||
}
|
||
}
|
||
.rightVideo {
|
||
width: 40%;
|
||
.video {
|
||
height: 60%;
|
||
}
|
||
.devInfo {
|
||
height: 40%;
|
||
display: flex;
|
||
.leftInfo {
|
||
width: 50%;
|
||
margin-right: 4%;
|
||
}
|
||
.rightInfo {
|
||
width: 50%;
|
||
}
|
||
.titleStatus {
|
||
height: 15%;
|
||
background: url("@/assets/images/towerCraneMonitoring/titleStatus.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-top: 5%;
|
||
margin-bottom: 2%;
|
||
font-size: calc(100vw * 16 / 1920);
|
||
line-height: 3.5vh;
|
||
padding-left: 5%;
|
||
}
|
||
.infoBox {
|
||
height: 80%;
|
||
background: url("@/assets/images/towerCraneMonitoring/InfoImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
.textColor {
|
||
color: #ccc;
|
||
}
|
||
div {
|
||
line-height: 2.7vh;
|
||
margin-left: 5%;
|
||
}
|
||
}
|
||
.driverPhoto {
|
||
top: 64%;
|
||
position: absolute;
|
||
left: 94%;
|
||
img {
|
||
width: 55%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
width: 100%;
|
||
height: 17%;
|
||
margin-top: 2%;
|
||
display: flex;
|
||
.bottomList {
|
||
width: 8%;
|
||
height: 85%;
|
||
margin-right: 1%;
|
||
background: url("@/assets/images/towerCraneMonitoring/bottomImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
p {
|
||
margin-left: 12%;
|
||
font-size: calc(100vw * 16 / 1920);
|
||
}
|
||
.number {
|
||
color: #65d7f9;
|
||
}
|
||
.bg {
|
||
width: 80%;
|
||
height: 4%;
|
||
background-color: #65d7f9;
|
||
margin-left: 12%;
|
||
margin-top: -3%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::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>
|