327 lines
7.7 KiB
Vue
327 lines
7.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="rightBox">
|
|||
|
|
<div class="title"><i>设备监控信息</i></div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="selectRight">
|
|||
|
|
<el-select v-model="value" class="m-2" placeholder="Select" size="small">
|
|||
|
|
<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
|
|||
|
|
</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">3kg</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="lineAdata" style="left: 62%">
|
|||
|
|
<div>速度</div>
|
|||
|
|
<div style="color: #65d7f9">2m/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">9.59°</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="lineBdata" style="left: 61%">
|
|||
|
|
<div>Y倾角</div>
|
|||
|
|
<div style="color: #ec6266">15.18°</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>2h 20min</div>
|
|||
|
|
<div><span class="textColor"> 今日装载次数：</span>10次</div>
|
|||
|
|
<div><span class="textColor"> 今日装载工效：</span>1kg/min</div>
|
|||
|
|
<div><span class="textColor"> 今日装载重量：</span>10kg</div>
|
|||
|
|
<div><span class="textColor"> 今日违章次数：</span>0次</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="rightInfo">
|
|||
|
|
<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>马三</div>
|
|||
|
|
<div><span class="textColor"> 性别：</span>男</div>
|
|||
|
|
<div><span class="textColor"> 年龄：</span>41</div>
|
|||
|
|
<div><span class="textColor"> 工作年限：</span>12年</div>
|
|||
|
|
<div>
|
|||
|
|
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
|||
|
|
身份证号:</span
|
|||
|
|
>51180220150114147888
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="driverPhoto"><img src="@/assets/images/elevatorMonitoring/testImg.png" alt="" /></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom">
|
|||
|
|
<div class="bottomList" v-for="item in list">
|
|||
|
|
<p>{{ item.devName }}</p>
|
|||
|
|
<p class="number">{{ item.statusNumber }}</p>
|
|||
|
|
<div class="bg"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import Monitor from "@/views/sevenLargeScreen/elevatorMonitoring/eleMonitor.vue";
|
|||
|
|
import { ref, reactive } from "vue";
|
|||
|
|
const value = ref("1#电梯");
|
|||
|
|
const noiseList = [
|
|||
|
|
{
|
|||
|
|
value: 0,
|
|||
|
|
label: "2#电梯"
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
const list = reactive([
|
|||
|
|
{
|
|||
|
|
devName: "上限位",
|
|||
|
|
statusNumber: "正常"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
devName: "下限位",
|
|||
|
|
statusNumber: "正常"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
devName: "速度",
|
|||
|
|
statusNumber: "2m/s"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
devName: "载重",
|
|||
|
|
statusNumber: "3kg"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
devName: "X倾角",
|
|||
|
|
statusNumber: "9.59°"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
devName: "Y倾角",
|
|||
|
|
statusNumber: "15.18°"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
devName: "前门锁",
|
|||
|
|
statusNumber: "正常"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
devName: "后门锁",
|
|||
|
|
statusNumber: "正常"
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
</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>
|