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> |