<template>
|
<div class="input-out-material-info">
|
<div class="card-t">
|
<div class="card-t-t card_drop">
|
<el-popover :width="200" placement="top-start" trigger="click">
|
<template #reference>
|
{{ item.materialId }}
|
</template>
|
{{ item.materialId }}
|
</el-popover>
|
</div>
|
<div class="card-t-b">
|
设备12
|
<el-icon class="right-arrow">
|
<Right />
|
</el-icon>
|
设备13
|
</div>
|
</div>
|
<div class="card-b">
|
<div class="card_drop card-b-l">
|
<el-popover :width="200" placement="top-start" trigger="click">
|
<template #reference>
|
{{ item.materialName }}
|
</template>
|
{{ item.materialName }}
|
</el-popover>
|
</div>
|
<div class="card-b-r">
|
<el-popover v-if="item.date" popper-class="card-info" :width="110" placement="top" trigger="click">
|
<template #reference> {{ item.amount }} {{ item.unit }} </template>
|
预计{{ item.date }}分钟送达
|
</el-popover>
|
<div v-else>{{ item.amount }} {{ item.unit }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import type { inputMaterial } from '@/api/task'
|
import { Right } from '@element-plus/icons-vue'
|
import { toRefs } from 'vue'
|
|
export interface InputOutMaterialInfoProps {
|
item: inputMaterial
|
background?: string
|
}
|
|
const props = withDefaults(defineProps<InputOutMaterialInfoProps>(), {
|
background: '#ffcc00'
|
})
|
const { item, background } = toRefs(props)
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #13235a;
|
$status-running: #f76c0f;
|
$status-ready: #13235a;
|
$status-done: #ffcc00;
|
|
.input-out-material-info {
|
width: calc(50% - 10px);
|
height: auto;
|
border-radius: 4px;
|
color: #333;
|
overflow: hidden;
|
float: left;
|
font-size: 15px;
|
background: #fff;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
position: relative;
|
|
.card_drop {
|
width: 100%;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
cursor: pointer;
|
}
|
.card-t {
|
width: 100%;
|
height: auto;
|
line-height: 18px;
|
font-size: 12px;
|
color: #333;
|
padding: 3px 5px;
|
// background: $status-done;
|
background-color: v-bind(background);
|
text-align: left;
|
.card-t-t {
|
width: 100%;
|
font-size: 16px;
|
}
|
}
|
.card-b {
|
width: 100%;
|
height: 36px;
|
line-height: 20px;
|
font-size: 14px;
|
padding: 8px 5px;
|
.card-b-l {
|
width: calc(100% - 70px);
|
float: left;
|
font-size: 13px;
|
}
|
.card-b-r {
|
width: 70px;
|
float: right;
|
text-align: right;
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
.el-popover.el-popper.card-info {
|
min-width: 110px;
|
background: red !important;
|
font-size: 12px;
|
color: #fff;
|
border: 0px;
|
border-radius: 10px;
|
// height:20px!important;
|
line-height: 8px !important;
|
.el-popper__arrow::before {
|
background: red !important;
|
border-color: red;
|
}
|
}
|
</style>
|
