516 lines
15 KiB
Vue
516 lines
15 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)"
|
||
/>
|
||
</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: 58%">
|
||
<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.workTimeName || 0 }}</div>
|
||
<div><span class="textColor"> 今日装载次数：</span>{{ lifeList.loadingNum || 0 }}次</div>
|
||
<div><span class="textColor"> 今日装载工效：</span>{{ lifeList.loadingErgonomic || 0 }}kg/h</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">
|
||
<div class="titleStatus">
|
||
<span style="color:#fff;cursor: pointer" v-if="isShow==false" @click="infoBtn">司机信息</span>
|
||
<span style="color:#ccc;cursor: pointer" v-else @click="infoBtn">司机信息</span>
|
||
<span
|
||
><img style="margin-left: 4%; width: 6%" src="@/assets/images/towerCraneMonitoring/setUp.png" alt="" />
|
||
</span>
|
||
<span v-if="isShow == true" style="margin-left: 6%; color: #fff; cursor: pointer" @click="deviceInf"
|
||
>设备信息</span
|
||
>
|
||
<span v-else style="margin-left: 6%; color: #ccc; cursor: pointer" @click="deviceInf">设备信息</span>
|
||
</div>
|
||
<!-- 司机信息 -->
|
||
<div class="infoBox" v-show="isShowTime">
|
||
<!-- <div><span class="textColor">认证状态：</span>-</div> -->
|
||
<div><span class="textColor"> 姓名：</span>{{ driverInfo.workerName || "未知" }}</div>
|
||
<div>
|
||
<span class="textColor"> 性别：</span>{{ driverInfo.sex == 1 ? "男" : driverInfo.sex == 2 ? "女" : "未知" }}
|
||
</div>
|
||
<div><span class="textColor"> 年龄：</span>{{ driverInfo.age || "未知" }}</div>
|
||
<div><span class="textColor"> 本次连续工作时长：</span>{{ driverInfo.continuousWorkingTimeName || 0 }}</div>
|
||
<div style="width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
身份证号:</span
|
||
>{{ driverInfo.idCard || "未知" }}
|
||
</div>
|
||
<div style="width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
<span class="textColor" style="width: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
特种资格证书编号:</span
|
||
>{{ driverInfo.specialCertificateNumber || "未知" }}
|
||
</div>
|
||
<div>
|
||
<span class="textColor"> 资格证书：</span>
|
||
<a style="color: #64d6f8; cursor: pointer" @click="driverDetail">{{ "查看详情" }}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="driverPhoto"><img :src="driverInfo.imageUrl" alt="" /></div>
|
||
<!-- 设备信息 -->
|
||
<div class="infoBox" v-show="isShow">
|
||
<div style="width: 98%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
设备名称：</span
|
||
>{{ towerDetail.devName || "未知" }}
|
||
</div>
|
||
<div style="width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
<span class="textColor"> 设备编号：</span>{{ towerDetail.devSn || "未知" }}
|
||
</div>
|
||
<div><span class="textColor"> 机械设备备案号：</span>{{ towerDetail.filingNo || "未知" }}</div>
|
||
<div><span class="textColor"> 最大高度：</span>{{ towerDetail.maxHeight || "未知" }}</div>
|
||
<div>
|
||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
工作循环最大载重：</span
|
||
>{{ towerDetail.maxLoad || "未知" }}
|
||
</div>
|
||
<div>
|
||
<span class="textColor" style="width: 10%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
总楼层数：</span
|
||
>{{ towerDetail.totalFloor || "未知" }}
|
||
</div>
|
||
<!-- <div>
|
||
<span
|
||
class="textColor"
|
||
style="width: 10%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
|
||
>
|
||
拆除单位：</span
|
||
>{{ towerDetailData.demolitionUnit || "未知" }}
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bottomList">
|
||
<p>防冲顶</p>
|
||
<p class="number">{{ elevatorList.topAlarm == 1 ? "报警" : "正常" }}</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">{{ elevatorList.frontDoorState == 1 ? "关" : "开" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>后门锁</p>
|
||
<p class="number">{{ elevatorList.backDoorState == 1 ? "关" : "开" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>在线状态</p>
|
||
<p class="number">{{ elevatorList.isOnline == 0 ? "不在线" : "在线" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>报警状态</p>
|
||
<p class="number">{{ elevatorList.noAlarm == 1 ? "无任何报警" : "有报警" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>高度</p>
|
||
<p class="number">{{ elevatorList.height }}m</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>当前楼层</p>
|
||
<p class="number">{{ elevatorList.floorNum }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||
import Monitor from "@/views/sevenLargeScreen/elevatorMonitoring/eleMonitor.vue";
|
||
import {
|
||
getLifterListApi,
|
||
getNewestLifterApi,
|
||
getQueryTodayOperatingApi,
|
||
getRelatedInfoApi,
|
||
getLifterQueryByIdApi
|
||
} 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);
|
||
let isShowTime = ref(true); //司机信息
|
||
let isShow = ref(false); //设备信息
|
||
//司机点击
|
||
const infoBtn=()=>{
|
||
isShowTime.value=true
|
||
isShow.value=false
|
||
}
|
||
//设备信息
|
||
const deviceInf = () => {
|
||
isShow.value=true
|
||
isShowTime.value=false
|
||
|
||
};
|
||
// 下拉框选中
|
||
function checkItem(val: any) {
|
||
console.log("下拉框选中", val);
|
||
|
||
lifterDevSn.value = val.devSn;
|
||
mitts.emit("elevaTorSelectId", val.id);
|
||
|
||
console.log("发送的id", val.id);
|
||
|
||
// getLifterList()
|
||
getLifterData();
|
||
getSelectTower();
|
||
getDriverInfoList(lifterDevSn.value);
|
||
getTowerData(val.id);
|
||
}
|
||
// 获取设备信息数据
|
||
const towerDetail = ref({} as any);
|
||
const getTowerData = async (data: any) => {
|
||
console.log("接收设备信息desn", data);
|
||
|
||
const res = await getLifterQueryByIdApi({
|
||
id: data
|
||
});
|
||
if (res.result) {
|
||
towerDetail.value = res.result;
|
||
console.log("获取设备信息数据res.result", towerDetail.vaule);
|
||
console.log("获取设备信息取值", towerDetail.valuedevName);
|
||
}
|
||
};
|
||
//获取设备下拉列表
|
||
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(lifterDevSn.value);
|
||
getTowerData(lifeValue.value);
|
||
};
|
||
|
||
//获取升降机实时数据
|
||
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: lifterDevSn.value
|
||
});
|
||
if (res.result) {
|
||
console.log("获取运行状态", res);
|
||
lifeList.value = res.result;
|
||
}
|
||
};
|
||
|
||
//获取司机信息
|
||
let driverInfo = ref([] as any);
|
||
const getDriverInfoList = async (val: any) => {
|
||
console.log("司机信息接收的devSn", val);
|
||
|
||
const res = await getRelatedInfoApi({
|
||
devSn: val
|
||
});
|
||
if (res.result) {
|
||
driverInfo.value = res.result.devWorker.workerList[0];
|
||
console.log("获取司机信息", res);
|
||
// 全部数据获取完后异步发放设备ID给摄像头，实现进入页面播放摄像头
|
||
setTimeout(() => {
|
||
mitts.emit("elevaTorSelectId", lifeValue.value);
|
||
}, 2500);
|
||
}
|
||
};
|
||
|
||
//查看详情跳转
|
||
function driverDetail() {
|
||
window.open("https://zlaq.mohurd.gov.cn/fwmh/bjxcjgl/fwmh/pages/construction_safety/qytzzyry/qytzzyry.html");
|
||
}
|
||
|
||
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%;
|
||
width: 6%;
|
||
top: 24%;
|
||
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: 23%;
|
||
top: 23%;
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.lineA {
|
||
position: absolute;
|
||
top: 56%;
|
||
left: 53%;
|
||
img {
|
||
width: 60%;
|
||
}
|
||
}
|
||
.lineB {
|
||
position: absolute;
|
||
top: 70%;
|
||
left: 49%;
|
||
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: 53.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 {
|
||
margin-top: 4%;
|
||
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>
|