master
lzq
parent
ed6edcaec6
commit
f4d7d6333f
|
|
@ -9,7 +9,6 @@ import DisposeRecodeApi from '@/pages/dispose-recode/dispose-recode-api.ts'
|
|||
import Times from '@/common/utils/times.ts'
|
||||
|
||||
const disposeRecodeDetail = ref<InstanceType<typeof DisposeRecodeDetail> | null>(null)
|
||||
const disposeRecode = ref<HTMLElement | undefined>(undefined)
|
||||
const chartOption = reactive<Echarts.Option>({
|
||||
aria: {
|
||||
enabled: true,
|
||||
|
|
@ -174,7 +173,7 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="disposeRecode" class="dispose-recode">
|
||||
<div class="dispose-recode">
|
||||
<div class="title">垃圾处置记录</div>
|
||||
<div class="desc">管理和分析垃圾处置数据</div>
|
||||
<IxCard class="graph-card">
|
||||
|
|
@ -209,7 +208,7 @@ onMounted(() => {
|
|||
</template>
|
||||
</IxTable>
|
||||
</IxCard>
|
||||
<DisposeRecodeDetail ref="disposeRecodeDetail" :container="disposeRecode"/>
|
||||
<DisposeRecodeDetail ref="disposeRecodeDetail"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<script lang="ts" setup>
|
||||
let props = defineProps<{
|
||||
container?: HTMLElement;
|
||||
}>()
|
||||
const show = ref(false)
|
||||
const ins = ref<HTMLElement | null>(null)
|
||||
const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
|
||||
|
|
@ -17,18 +14,24 @@ const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
|
|||
inTime: '',
|
||||
outTime: '',
|
||||
disposalSite: '',
|
||||
inFrontPhoto: '',
|
||||
inBodyPhoto: '',
|
||||
outFrontPhoto: '',
|
||||
outBodyPhoto: '',
|
||||
})
|
||||
const container = ref<HTMLElement | undefined>(undefined)
|
||||
|
||||
onMounted(() => {
|
||||
let container = props.container
|
||||
if (container) {
|
||||
container.style.position = 'relative'
|
||||
}
|
||||
})
|
||||
function closeHandler() {
|
||||
container.value!.style!.width = '0'
|
||||
container.value!.style!.height = '0'
|
||||
show.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(detail: DisposeRecodeTypes.DisposeRecodeData) {
|
||||
Object.assign(data, detail)
|
||||
container.value!.style.width = '100%'
|
||||
container.value!.style.height = '100%'
|
||||
show.value = true
|
||||
}
|
||||
})
|
||||
|
|
@ -36,28 +39,84 @@ defineExpose({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<IxModal ref="ins" v-model:visible="show" :container="container" :mask="false" cancel-text="关闭" class="dispose-recode-detail" draggable header="详情" maskClosable type="default" width="40rem">
|
||||
<p class="detail-item"><span>来源地：</span><span>{{ data.origin }}</span></p>
|
||||
<p class="detail-item"><span>清运公司：</span><span>{{ data.clearingCompany }}</span></p>
|
||||
<p class="detail-item"><span>车牌号：</span><span>{{ data.licensePlate }}</span></p>
|
||||
<p class="detail-item"><span>联系人：</span><span>{{ data.contact }}</span></p>
|
||||
<p class="detail-item"><span>联系电话：</span><span>{{ data.contactPhone }}</span></p>
|
||||
<p class="detail-item"><span>进场磅重（吨）：</span><span>{{ data.inWeight }}</span></p>
|
||||
<p class="detail-item"><span>出场磅重（吨）：</span><span>{{ data.outWeight }}</span></p>
|
||||
<p class="detail-item"><span>净重（吨）：</span><span>{{ data.suttleWeight }}</span></p>
|
||||
<p class="detail-item"><span>进场时间：</span><span>{{ data.inTime }}</span></p>
|
||||
<p class="detail-item"><span>出场时间：</span><span>{{ data.outTime }}</span></p>
|
||||
<p class="detail-item"><span>消纳场名称：</span><span>{{ data.disposalSite }}</span></p>
|
||||
<template #footer="{ cancel:_, ok }">
|
||||
<div ref="container" style="position: absolute;width: 0;height: 0">
|
||||
<IxModal ref="ins" v-model:visible="show" :container="container"
|
||||
:mask="false"
|
||||
:on-before-close="closeHandler" cancel-text="关闭" class="dispose-recode-detail" draggable header="处置详情" maskClosable type="default" width="50rem">
|
||||
<div class="dispose-recode-detail-info">
|
||||
<p class="detail-item"><span>来源地：</span><span>{{ data.origin }}</span></p>
|
||||
<p class="detail-item"><span>清运公司：</span><span>{{ data.clearingCompany }}</span></p>
|
||||
<p class="detail-item"><span>车牌号：</span><span>{{ data.licensePlate }}</span></p>
|
||||
<p class="detail-item"><span>联系人：</span><span>{{ data.contact }}</span></p>
|
||||
<p class="detail-item"><span>联系电话：</span><span>{{ data.contactPhone }}</span></p>
|
||||
<p class="detail-item"><span>进场磅重（吨）：</span><span>{{ data.inWeight }}</span></p>
|
||||
<p class="detail-item"><span>出场磅重（吨）：</span><span>{{ data.outWeight }}</span></p>
|
||||
<p class="detail-item"><span>净重（吨）：</span><span>{{ data.suttleWeight }}</span></p>
|
||||
<p class="detail-item"><span>进场时间：</span><span>{{ data.inTime }}</span></p>
|
||||
<p class="detail-item"><span>出场时间：</span><span>{{ data.outTime }}</span></p>
|
||||
<p class="detail-item"><span>消纳场名称：</span><span>{{ data.disposalSite }}</span></p>
|
||||
</div>
|
||||
<div class="dispose-recode-detail-img-title">车辆照片</div>
|
||||
<div class="dispose-recode-detail-img">
|
||||
<p class="detail-item img-card"><span class="img-title">进场车头照</span><img :src="data.inFrontPhoto" alt="进场前"></p>
|
||||
<p class="detail-item img-card"><span class="img-title">进场车身照</span><img :src="data.inBodyPhoto" alt="进场后"></p>
|
||||
<p class="detail-item img-card"><span class="img-title">出出场车头照</span><img :src="data.outFrontPhoto" alt="出场前"></p>
|
||||
<p class="detail-item img-card"><span class="img-title">出场车身照</span><img :src="data.outBodyPhoto" alt="出场后"></p>
|
||||
</div>
|
||||
|
||||
<template #footer="{ cancel:_, ok }">
|
||||
<IxButton mode="primary" @click="ok">确定</IxButton>
|
||||
</template>
|
||||
</IxModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.dispose-recode-detail .detail-item:not(:last-child) {
|
||||
border-bottom: 1px #E5E7EB dashed;
|
||||
padding-bottom: 0.5rem;
|
||||
.dispose-recode-detail-info, .dispose-recode-detail-img {
|
||||
display grid !important
|
||||
grid-template-columns 1fr 1fr
|
||||
grid-gap 1rem
|
||||
}
|
||||
|
||||
.dispose-recode-detail-img-title {
|
||||
color #1F2937
|
||||
font-weight bold
|
||||
margin-bottom .5rem
|
||||
}
|
||||
|
||||
.img-card {
|
||||
background-color: rgb(249 250 251);
|
||||
padding .5rem
|
||||
border-radius .5rem
|
||||
|
||||
img {
|
||||
width: 100%; /* 图片宽度适应列宽 */
|
||||
height: auto; /* 保持图片原始比例 */
|
||||
object-fit: cover; /* 图片会被裁剪以适应比例，保持填充 */
|
||||
}
|
||||
}
|
||||
|
||||
.img-title {
|
||||
text-align center
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
|
||||
span, img {
|
||||
display block
|
||||
}
|
||||
|
||||
span:first-child {
|
||||
color #6B7280
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color #111827
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ix-modal-body) {
|
||||
max-height: 45rem;
|
||||
}
|
||||
|
||||
:deep(.ix-modal-wrapper),
|
||||
|
|
@ -65,27 +124,4 @@ defineExpose({
|
|||
position absolute
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display flex
|
||||
justify-content start
|
||||
align-items center
|
||||
|
||||
span:nth-child(1) {
|
||||
flex 10
|
||||
font-weight bold
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
flex 14
|
||||
text-align end
|
||||
padding-right 10%
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
display inline-block
|
||||
color #1D2129
|
||||
font-size 1.25rem
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ declare global {
|
|||
inTime: string
|
||||
outTime: string
|
||||
disposalSite: string
|
||||
inFrontPhoto: string
|
||||
inBodyPhoto: string
|
||||
outFrontPhoto: string
|
||||
outBodyPhoto: string
|
||||
}
|
||||
|
||||
interface SearchParam {
|
||||
|
|
|
|||
Loading…
Reference in New Issue