103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
<template>
|
|
<Card title="施工电梯报告">
|
|
<div class="leftBottom">
|
|
<div class="time">
|
|
<el-date-picker
|
|
v-model="value1"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:size="size"
|
|
/>
|
|
</div>
|
|
<div class="listDiv">
|
|
<div class="list" v-for="item in 3">
|
|
<div class="listLeft"><img src="@/assets/images/towerCraneMonitoring/dtImg.png" alt="" /></div>
|
|
<div class="listRight">
|
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
|
<p style="font-size: 14px; margin-top: 4%">设备名称</p>
|
|
<div class="devStatus">
|
|
<div v-if="devState === 0" style="font-size: 14px; color: #65d7f9">正常</div>
|
|
<div v-else style="font-size: 14px; color: #ec6266">报警</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: -6%; color: #a1accb">时间:2023-04-18-2023-04-24</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="list"></div>
|
|
<div class="list"></div> -->
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import Card from "@/components/card.vue";
|
|
const size = (ref < "default") | "large" | ("small" > "default");
|
|
const value1 = ref("");
|
|
let devState = ref(0 as any);
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.leftBottom {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
.time {
|
|
position: absolute;
|
|
z-index: 999;
|
|
left: 15%;
|
|
margin-top: 0.5%;
|
|
}
|
|
.listDiv {
|
|
width: 89%;
|
|
height: 74%;
|
|
margin-top: 10%;
|
|
margin-left: 6%;
|
|
.list {
|
|
width: 100%;
|
|
height: 30%;
|
|
background-color: orange;
|
|
background: url("@/assets/images/towerCraneMonitoring/carContent.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: 2%;
|
|
display: flex;
|
|
position: relative;
|
|
.listLeft {
|
|
margin-left: 4%;
|
|
img {
|
|
height: 85%;
|
|
width: 100%;
|
|
margin-top: 11%;
|
|
}
|
|
}
|
|
.listRight {
|
|
color: #fff;
|
|
margin-left: 3%;
|
|
.devStatus {
|
|
position: absolute;
|
|
right: 5%;
|
|
top: 15%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-input__wrapper {
|
|
width: 50%;
|
|
height: 0%;
|
|
background: #0d2956;
|
|
}
|
|
::v-deep .el-range-separator {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
::v-deep .el-range-input {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|