136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
|
<template>
|
|||
|
|
<div class="equipment_dialog">
|
|||
|
|
<div class="equipment_content">
|
|||
|
|
<div class="equip_title">
|
|||
|
|
装备信息
|
|||
|
|
</div>
|
|||
|
|
<div class="sub_title">
|
|||
|
|
<span class="title_text">XF986F轮胎式挖掘机</span>
|
|||
|
|
<span class="sub_status">(在租)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="more_info">
|
|||
|
|
<span style="padding-left: 0;">操作重量：7吨 </span>
|
|||
|
|
<span>
|
|||
|
|
铲斗容量：2立方米
|
|||
|
|
</span>
|
|||
|
|
<span>
|
|||
|
|
租赁方：XXXXXXXXXX有限公司
|
|||
|
|
</span>
|
|||
|
|
<span>
|
|||
|
|
租赁日期：2023.09.12-2024.09.12
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="time_select">
|
|||
|
|
<el-date-picker v-model="timeRange" size="media" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
|
|||
|
|
start-placeholder="Start date" end-placeholder="End date" />
|
|||
|
|
<el-button type="primary" style="margin-left: 12px;" size="media" >查询</el-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="map_line_out">
|
|||
|
|
<mapLine></mapLine>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import mapLine from "components/mapBaidu/mapLine.vue"
|
|||
|
|
const timeRange = ref<[Date, Date]>([
|
|||
|
|
new Date(2000, 10, 10, 10, 10),
|
|||
|
|
new Date(2000, 10, 11, 10, 10),
|
|||
|
|
])
|
|||
|
|
const shortcuts = [
|
|||
|
|
{
|
|||
|
|
text: 'Last week',
|
|||
|
|
value: () => {
|
|||
|
|
const end = new Date()
|
|||
|
|
const start = new Date()
|
|||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
|||
|
|
return [start, end]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Last month',
|
|||
|
|
value: () => {
|
|||
|
|
const end = new Date()
|
|||
|
|
const start = new Date()
|
|||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|||
|
|
return [start, end]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Last 3 months',
|
|||
|
|
value: () => {
|
|||
|
|
const end = new Date()
|
|||
|
|
const start = new Date()
|
|||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
|||
|
|
return [start, end]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.equipment_dialog {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.equipment_content {
|
|||
|
|
width: 1148px;
|
|||
|
|
height: 596px;
|
|||
|
|
padding: 0px 60px 35px;
|
|||
|
|
background-image: url("../../assets/img/mapBg.png");
|
|||
|
|
background-size: contain;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.equip_title {
|
|||
|
|
font-size: 25px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
height: 49px;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-top: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub_title {
|
|||
|
|
height: 41px;
|
|||
|
|
padding-top: 35px;
|
|||
|
|
.title_text {
|
|||
|
|
font-size: 27px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub_status {
|
|||
|
|
padding: 0 4px;
|
|||
|
|
color: #70FBFF;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more_info {
|
|||
|
|
padding-bottom: 25px;
|
|||
|
|
height: 16px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
padding-left: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.map_line_out{
|
|||
|
|
width: 1030px;
|
|||
|
|
height: 374px;
|
|||
|
|
padding-top: 25px;
|
|||
|
|
}
|
|||
|
|
</style>
|