747 lines
22 KiB
Vue
747 lines
22 KiB
Vue
<template>
|
||
<div class="rightBox">
|
||
<!-- <div class="title"><i>塔吊监控信息</i></div> -->
|
||
<div class="content">
|
||
<div class="towerInfo">
|
||
<span style="margin-right: 6%">塔吊信息</span>
|
||
<span><img src="@/assets/images/towerCraneMonitoring/infoIcon.png" alt="" /></span>
|
||
</div>
|
||
<div class="selectRight" v-if="towerDetailData">
|
||
<el-select v-model="towerValue" class="m-2" placeholder="Select" size="small">
|
||
<el-option
|
||
v-for="(item, index) in noiseList"
|
||
:key="index"
|
||
:label="item.devName"
|
||
:value="item.id"
|
||
@click="selectTower(item.devSn)"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="contentSmall" v-if="towerDetailData != null">
|
||
<div class="top">
|
||
<div class="leftTowerImg">
|
||
<div class="titleData">
|
||
<div class="dataOne">
|
||
<p class="text">前臂长(m)</p>
|
||
<p class="num">{{ towerDetailData.forearmLength || 0 }}</p>
|
||
</div>
|
||
<div class="dataTwo">
|
||
<p class="text2">塔臂高(m)</p>
|
||
<p class="num2">{{ towerDetailData.referenceHeight || 0 }}</p>
|
||
</div>
|
||
<div class="dataOne">
|
||
<p class="text">后臂长(m)</p>
|
||
<p class="num">{{ towerDetailData.posteriorArmLength || 0 }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="centerEleImg">
|
||
<img src="@/assets/images/towerCraneMonitoring/towerBg.png" alt="" />
|
||
<div class="btn" @click="moveAnimation()"></div>
|
||
</div>
|
||
<!-- <div class="towerA"><img id="image" src="@/assets/images/towerCraneMonitoring/towerA.png" alt="" /></div> -->
|
||
<div class="towerA"><img id="image" :src="towerClose" alt="" /></div>
|
||
<div class="lineB" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineB.png" alt="" /></div>
|
||
<div class="lineA" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineA.png" alt="" /></div>
|
||
<div class="lineC" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineC.png" alt="" /></div>
|
||
<div class="lineD" v-if="dataShow"><img src="@/assets/images/towerCraneMonitoring/lineD.png" alt="" /></div>
|
||
<div class="lineAdata" v-if="dataShow">
|
||
<div>荷载比</div>
|
||
<!-- 后端没有该字段，待定 -->
|
||
<div style="color: #65d7f9">{{ towerDetail.loadRatio || 0 }}%</div>
|
||
</div>
|
||
<div class="lineAdata" v-if="dataShow" style="left: 15%">
|
||
<div>力矩比</div>
|
||
<div style="color: #65d7f9">{{ towerDetail.torqueRatio || 0 }}%</div>
|
||
</div>
|
||
<div class="lineAdata" v-if="dataShow" style="left: 5%; top: 67%">
|
||
<div>吊重</div>
|
||
<div style="color: #65d7f9">{{ towerDetail.loading || 0 }}kg</div>
|
||
</div>
|
||
<div class="lineAdata" v-if="dataShow" style="left: 11%; top: 67%">
|
||
<div>幅度</div>
|
||
<div style="color: #65d7f9">{{ towerDetail.ranger || 0 }}m</div>
|
||
</div>
|
||
<div class="lineAdata" v-if="dataShow" style="left: 17%; top: 67%">
|
||
<div>高度</div>
|
||
<div style="color: #65d7f9">{{ towerDetail.height || 0 }}m</div>
|
||
</div>
|
||
<div class="lineAdata" v-if="dataShow" style="left: 57%; top: 27%">
|
||
<div>风速</div>
|
||
<div style="color: #65d7f9">{{ towerDetail.windspeed || 0 }}m/s</div>
|
||
</div>
|
||
<div class="lineAdata" v-if="dataShow" style="left: 51%; top: 65%">
|
||
<div>转角</div>
|
||
<div style="color: #65d7f9">{{ towerDetail.angle || 0 }}°</div>
|
||
</div>
|
||
<div class="lineBdata" v-if="dataShow" style="left: 57%; top: 65%">
|
||
<div>倾角</div>
|
||
<div style="color: #ec6266">{{ towerDetail.obliguity || 0 }}°</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" v-for="(item, index) in towerList" :key="index">
|
||
<!-- <div style="color: #65d7f9">人脸识别系统</div>
|
||
<div style="color: #65d7f9">塔吊考勤记录</div> -->
|
||
<div><span class="textColor"> 工作时长：</span>{{ item.runMinuteTimeName || 0 }}</div>
|
||
<div><span class="textColor"> 今日吊次：</span>{{ item.cycleNum || 0 }}次</div>
|
||
<div><span class="textColor"> 今日吊重：</span>{{ item.totalLoading || 0 }}kg</div>
|
||
<!-- <div><span class="textColor"> 今日工效：</span>1T/min</div> -->
|
||
<div><span class="textColor"> 今日报警：</span>{{ item.alarmNum || 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 == true">
|
||
<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: 10%; 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="BASEURL + '/image/' + driverInfo.imageUrl" alt="" /></div>
|
||
<!-- 设备信息 -->
|
||
<div class="infoBox" v-show="isShow == true">
|
||
<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
|
||
>{{ towerDetailData.factoryTime || "未知" }}
|
||
</div>
|
||
<div style="width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
<span class="textColor"> 设备备案编号：</span>{{ towerDetailData.superintendNo || "未知" }}
|
||
</div>
|
||
<div><span class="textColor"> 规格型号：</span>{{ towerDetailData.devModel || "未知" }}</div>
|
||
<div><span class="textColor"> 产权单位：</span>{{ towerDetailData.propertyUnit || "未知" }}</div>
|
||
<div>
|
||
<span class="textColor" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
安装单位：</span
|
||
>{{ towerDetailData.installationUnit || "未知" }}
|
||
</div>
|
||
<div>
|
||
<span class="textColor" style="width: 10%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||
制造厂家：</span
|
||
>{{ towerDetailData.factoryName || "未知" }}
|
||
</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">{{ list.torque || 0 }}kg.m</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>高度</p>
|
||
<p class="number">{{ list.height || 0 }}m</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>幅度</p>
|
||
<p class="number">{{ list.ranger || 0 }}m</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>高度限位</p>
|
||
<p class="number">{{ list.heightAlarm == 0 ? "正常" : list.heightAlarm == 1 ? "报警" : "预警" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>幅度限位</p>
|
||
<p class="number">{{ list.minRangeAlarm == 0 ? "正常" : list.minRangeAlarm == 1 ? "报警" : "预警" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>回转限位</p>
|
||
<p class="number">{{ list.posAngleAlarm == 0 ? "正常" : list.posAngleAlarm0 == 1 ? "报警" : "预警" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>多机防撞</p>
|
||
<p class="number">{{ list.multiAlarmAll == 0 ? "正常" : list.multiAlarmAll == 1 ? "报警" : "预警" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<!-- <div class="bottomList">
|
||
<p>障碍物碰撞</p>
|
||
<p class="number">0.2%</p>
|
||
<div class="bg"></div>
|
||
</div> -->
|
||
<div class="bottomList">
|
||
<p>禁入区</p>
|
||
<p class="number">{{ list.forbidEntryAlarm == 0 ? "正常" : list.forbidEntryAlarm == 1 ? "报警" : "预警" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>传感器故障</p>
|
||
<p class="number">{{ list.weightError == 0 ? "无故障" : "有故障" }}</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>风速</p>
|
||
<p class="number">{{ list.windspeed || 0 }}m/s</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<p>倾角</p>
|
||
<p class="number">{{ list.obliguity || 0 }}°</p>
|
||
<div class="bg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="notoDta" v-else>
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Monitor from "@/views/sevenLargeScreen/towerCraneMonitoring/monitor.vue";
|
||
import towerClose from "@/assets/images/towerCraneMonitoring/towerA.png";
|
||
import towerOpen from "@/assets/images/towerCraneMonitoring/towerB.png";
|
||
|
||
import { onMounted, ref, onBeforeUnmount } from "vue";
|
||
// import * as echarts from "echarts";
|
||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||
const BASEURL = import.meta.env.VITE_API_URL;
|
||
|
||
import {
|
||
getQueryByIdApi,
|
||
getTowerNumAndAlarmApi,
|
||
getNewestTowerApi,
|
||
getTowerCurrentCountApi,
|
||
getRelatedInfoApi,
|
||
getNewestDataApi
|
||
} from "@/api/modules/tower";
|
||
import { GlobalStore } from "@/stores";
|
||
const store = GlobalStore();
|
||
let towerValue = ref("暂无数据" as any);
|
||
let dataShow = ref(false);
|
||
let noiseList = ref([]);
|
||
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 moveAnimation() {
|
||
dataShow.value = !dataShow.value;
|
||
const towerA = document.querySelector(".towerA");
|
||
const image = document.querySelector("#image");
|
||
|
||
if (towerA.style.transform === "translateX(-250px)") {
|
||
towerA.style.transform = "translateX(0)";
|
||
// image.src = "src/assets/images/towerCraneMonitoring/towerA.png";
|
||
image.src = towerClose;
|
||
} else {
|
||
towerA.style.transform = "translateX(-250px)";
|
||
// image.src = "src/assets/images/towerCraneMonitoring/towerB.png";
|
||
image.src = towerOpen;
|
||
}
|
||
getTowerData();
|
||
}
|
||
|
||
// 下拉框选中
|
||
function selectTower(e: any) {
|
||
console.log("下拉框选中传的值", e);
|
||
towerDevSn.value = e;
|
||
mitts.emit("selectId", e);
|
||
// console.log('发送的id',e);
|
||
|
||
getTowerData();
|
||
getDriverInfoList();
|
||
getNewestData();
|
||
getSelectTower();
|
||
getTowerDetail();
|
||
}
|
||
// 获取塔吊详情
|
||
// 进入页面播放ID
|
||
let towerVideoId = ref("" as any);
|
||
let towerDevSn = ref("" as any);
|
||
let towerDetailData = ref(null as any);
|
||
const getTowerDetail = async () => {
|
||
const res: any = await getQueryByIdApi({
|
||
// projectSn: store.sn,
|
||
id: towerValue.value
|
||
});
|
||
if (res.result) {
|
||
towerDetailData.value = res.result;
|
||
// towerDevSn.value = res.result.devSn;
|
||
console.log("塔吊信息详情", res.result);
|
||
if (res.result.videoList.length > 0) {
|
||
towerVideoId.value = res.result.videoList[0].serialNumber;
|
||
setTimeout(() => {
|
||
mitts.emit("serialNumberId", res.result.videoList[0]);
|
||
}, 2000);
|
||
} else {
|
||
mitts.emit("serialNumberId", "");
|
||
}
|
||
}
|
||
};
|
||
//获取塔吊实时数据
|
||
let towerDetail = ref(null as any);
|
||
const getTowerData = async () => {
|
||
const res = await getNewestTowerApi({
|
||
devSn: towerDevSn.value
|
||
});
|
||
if (res.result != null) {
|
||
towerDetail.value = res.result;
|
||
} else {
|
||
towerDetail.value = [];
|
||
}
|
||
console.log("获取塔吊实时数据", res);
|
||
};
|
||
|
||
// 获取塔吊列表
|
||
const getTowerNumAndAlarmList = async () => {
|
||
const res: any = await getTowerNumAndAlarmApi({
|
||
projectSn: store.sn
|
||
});
|
||
if (res.result) {
|
||
console.log("获取塔吊列表", res);
|
||
if (res.result.deviceList.length > 0) {
|
||
towerValue.value = res.result.deviceList[0].id;
|
||
towerDevSn.value = res.result.deviceList[0].devSn;
|
||
noiseList.value = res.result.deviceList;
|
||
console.log("塔吊option", noiseList.value);
|
||
mitts.emit("selectId", towerValue.value);
|
||
|
||
await getTowerData();
|
||
await getSelectTower();
|
||
await getDriverInfoList();
|
||
await getNewestData();
|
||
await getTowerDetail();
|
||
}
|
||
}
|
||
};
|
||
|
||
//获取运行状态
|
||
let towerList = ref([] as any);
|
||
const getSelectTower = async () => {
|
||
towerList.value.length = 0;
|
||
const res = await getTowerCurrentCountApi({
|
||
projectSn: store.sn
|
||
});
|
||
if (res.result) {
|
||
console.log("运行状态", res.result);
|
||
res.result.forEach((item: any) => {
|
||
if (item.devSn == towerDevSn.value) {
|
||
towerList.value.push(item);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
//获取司机信息
|
||
let driverInfo = ref([] as any);
|
||
const getDriverInfoList = async () => {
|
||
const res = await getRelatedInfoApi({
|
||
devSn: towerDevSn.value
|
||
});
|
||
if (res.result) {
|
||
console.log("获取司机信息", res.result);
|
||
if(res.result.devWorker.workerList[0]){
|
||
driverInfo.value = res.result.devWorker.workerList[0];
|
||
}else{
|
||
driverInfo.value = {
|
||
addTime: '',
|
||
age: '',
|
||
continuousWorkingTime: '',
|
||
continuousWorkingTimeName: '',
|
||
idCard: '',
|
||
imageUrl: '',
|
||
phoneNumber: '',
|
||
sex: '',
|
||
specialCertificateNumber: '',
|
||
workerName: '',
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
//获取右下实时数据
|
||
let list = ref({} as any);
|
||
const getNewestData = async () => {
|
||
const res = await getNewestDataApi({
|
||
devSn: towerDevSn.value
|
||
});
|
||
if (res.result) {
|
||
list.value = res.result;
|
||
// setTimeout(() => {
|
||
// mitts.emit("serialNumberId", towerVideoId.value);
|
||
// }, 2000);
|
||
}
|
||
console.log("获取右下实时数据", res);
|
||
};
|
||
|
||
//查看详情跳转
|
||
function driverDetail() {
|
||
window.open("https://zlaq.mohurd.gov.cn/fwmh/bjxcjgl/fwmh/pages/construction_safety/qytzzyry/qytzzyry.html");
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await getTowerNumAndAlarmList();
|
||
});
|
||
//
|
||
onBeforeUnmount(async () => {
|
||
mitts.off("serialNumberId");
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.rightBox {
|
||
width: 100%;
|
||
height: 97%;
|
||
.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);
|
||
position: relative;
|
||
// .main {
|
||
// border-radius: 8px;
|
||
// flex: 1;
|
||
// height: 80vh;
|
||
// }
|
||
.towerInfo {
|
||
margin: 1% 1.5%;
|
||
width: 10%;
|
||
height: 5%;
|
||
position: absolute;
|
||
}
|
||
.selectRight {
|
||
position: absolute;
|
||
left: 58%;
|
||
width: 7%;
|
||
top: 2%;
|
||
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%;
|
||
.titleData {
|
||
width: 100%;
|
||
height: 25%;
|
||
display: flex;
|
||
.dataOne {
|
||
width: 15%;
|
||
height: 80%;
|
||
background: url("@/assets/images/towerCraneMonitoring/blueImg.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 15%;
|
||
margin-top: 2%;
|
||
text-align: center;
|
||
.text {
|
||
color: #65d7f9;
|
||
font-size: calc(100vw * 16 / 1920);
|
||
}
|
||
.num {
|
||
font-size: calc(100vw * 24 / 1920);
|
||
font-family: sadigitalNumber;
|
||
font-weight: 700;
|
||
background-image: linear-gradient(to right, rgba(101, 215, 249, 1), rgba(255, 255, 255, 1));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-top: -2%;
|
||
}
|
||
}
|
||
.dataTwo {
|
||
width: 15%;
|
||
height: 80%;
|
||
background: url("@/assets/images/towerCraneMonitoring/puperImg.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 15%;
|
||
margin-top: 2%;
|
||
text-align: center;
|
||
.text2 {
|
||
font-size: calc(100vw * 16 / 1920);
|
||
}
|
||
.num2 {
|
||
font-size: calc(100vw * 24 / 1920);
|
||
font-family: sadigitalNumber;
|
||
font-weight: 700;
|
||
background-image: linear-gradient(to right, rgba(244, 208, 101, 1), rgba(218, 216, 180, 1));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-top: -2%;
|
||
}
|
||
}
|
||
}
|
||
.centerEleImg {
|
||
position: absolute;
|
||
left: 10%;
|
||
top: 28%;
|
||
img {
|
||
width: 35vw;
|
||
height: 40vh;
|
||
}
|
||
.btn {
|
||
top: 5vw;
|
||
position: absolute;
|
||
width: 15%;
|
||
height: 26%;
|
||
left: 21vw;
|
||
cursor: pointer;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
.towerA {
|
||
position: absolute;
|
||
left: 24vw;
|
||
top: 32vh;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
transition: transform 0.3s ease; /* 添加过渡效果 */
|
||
transform: translateX(0); /* 初始位置为0 */
|
||
}
|
||
|
||
.towerB {
|
||
position: absolute;
|
||
left: 39vw;
|
||
top: 49vh;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
.lineA {
|
||
position: absolute;
|
||
top: 27vh;
|
||
left: 15vw;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
.lineB {
|
||
position: absolute;
|
||
top: 26vh;
|
||
left: 36vw;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
.lineC {
|
||
position: absolute;
|
||
top: 50vh;
|
||
left: 10vw;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
.lineD {
|
||
position: absolute;
|
||
top: 52vh;
|
||
left: 32vw;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
.lineAdata {
|
||
width: 5%;
|
||
height: 9%;
|
||
top: 29%;
|
||
position: absolute;
|
||
background: url("@/assets/images/towerCraneMonitoring/bottomImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 9%;
|
||
font-size: calc(100vw * 16 / 1920);
|
||
div {
|
||
margin: 10% 0 0 16%;
|
||
}
|
||
}
|
||
.lineBdata {
|
||
width: 5%;
|
||
height: 9%;
|
||
top: 71%;
|
||
position: absolute;
|
||
background: url("@/assets/images/elevatorMonitoring/redWanning.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 69.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: 59%;
|
||
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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.notoDta {
|
||
width: 20%;
|
||
height: 20%;
|
||
margin-top: 20%;
|
||
margin-left: 40%;
|
||
img {
|
||
width: 30%;
|
||
margin: 6% 36%;
|
||
}
|
||
p {
|
||
width: 100%;
|
||
color: #fff;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
margin: -5% 41%;
|
||
}
|
||
}
|
||
::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>
|