1

src/pages/dispose-recode/DisposeRecode.vue

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

src/pages/dispose-recode/DisposeRecodeDetail.vue

@@ -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,7 +39,11 @@ 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">
+  <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>
@@ -48,16 +55,68 @@ defineExpose({
         <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>

src/pages/dispose-recode/dispose-recode.d.ts

@@ -14,6 +14,10 @@ declare global {
       inTime: string
       outTime: string
       disposalSite: string
+      inFrontPhoto: string
+      inBodyPhoto: string
+      outFrontPhoto: string
+      outBodyPhoto: string
     }
 
     interface SearchParam {