linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设备台账详情增加图片

Browse Source
test
liutao 2 weeks ago
parent 28c7322d71
commit db458ccc5d
1 changed files with 192 additions and 74 deletions
Show Stats Download Patch File Download Diff File

266
src/views/mes/deviceledger/detail/index.vue
Unescape Escape View File

@ -2,68 +2,104 @@
<ContentWrap>
<div v-loading="detailLoading" class="device-ledger-detail-body">
<div class="device-ledger-detail-title">设备基本信息</div>
<el-descriptions :column="3" class="device-ledger-detail-desc">
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceNo')">
{{ detailData?.deviceCode ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')">
{{ detailData?.deviceName ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')">
<dict-tag type="mes_tz_status" :value="detailData?.deviceStatus" />
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
{{ detailData?.deviceModel ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">
{{ detailData?.deviceSpec ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')">
<el-tag effect="light">{{ getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')">
{{ detailData?.deviceLocation ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">
{{ detailData?.deviceManagerName ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">
{{ formatDetailDate(detailData?.productionDate) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">
{{ formatDetailDate(detailData?.factoryEntryDate) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.remark')">
{{ detailData?.remark ?? detailData?.deviceRemark ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.creatorName')">
{{ detailData?.creatorName ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.createTime')">
{{ formatDetailDate(detailData?.createTime) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.updateTime')">
{{ formatDetailDate(detailData?.updateTime) }}
</el-descriptions-item>
</el-descriptions>
<div v-if="detailData?.qrcodeUrl" class="device-ledger-detail-qrcode">
<div class="device-ledger-detail-qrcode-title">设备二维码</div>
<QrcodeActionCard
:image-url="detailData.qrcodeUrl"
:print-id="detailData.id || detailData.deviceCode"
:print-title="`${detailData.deviceName || '设备'}码打印预览`"
:print-paper-width="80"
:print-paper-height="80"
:print-max-width="220"
:empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
:error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
:template-json="detailTemplateJson"
:print-data="buildDetailPrintData()"
:show-refresh="false"
/>
<div class="device-ledger-detail-qrcode-desc">扫码查看设备详情</div>
<div class="device-ledger-detail-qrcode-sub">支持点检 / 报修 / 维保</div>
<div class="device-ledger-detail-main" >
<div v-if="deviceImageList.length" class="device-ledger-detail-images">
<el-carousel
v-if="deviceImageList.length > 1"
height="188px"
indicator-position="outside"
class="device-ledger-detail-carousel"
>
<el-carousel-item v-for="img in deviceImageList" :key="img">
<el-image
:src="img"
:preview-src-list="deviceImageList"
preview-teleported
fit="cover"
class="device-ledger-detail-image"
>
<template #error>
<div class="device-ledger-detail-image-error">图片加载失败</div>
</template>
</el-image>
</el-carousel-item>
</el-carousel>
<el-image
v-else
:src="firstDeviceImage"
:preview-src-list="deviceImageList"
preview-teleported
fit="cover"
class="device-ledger-detail-image"
>
<template #error>
<div class="device-ledger-detail-image-error">图片加载失败</div>
</template>
</el-image>
</div>
<el-descriptions :column="3" class="device-ledger-detail-desc">
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceNo')">
{{ detailData?.deviceCode ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')">
{{ detailData?.deviceName ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')">
<dict-tag type="mes_tz_status" :value="detailData?.deviceStatus ?? ''" />
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
{{ detailData?.deviceModel ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">
{{ detailData?.deviceSpec ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')">
<el-tag effect="light">{{ getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')">
{{ detailData?.deviceLocation ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">
{{ deviceManagerName }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">
{{ formatDetailDate(detailData?.productionDate) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">
{{ formatDetailDate(detailData?.factoryEntryDate) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.remark')">
{{ detailData?.remark ?? detailData?.deviceRemark ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.creatorName')">
{{ detailData?.creatorName ?? '' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.createTime')">
{{ formatDetailDate(detailData?.createTime) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.updateTime')">
{{ formatDetailDate(detailData?.updateTime) }}
</el-descriptions-item>
</el-descriptions>
<div v-if="detailData?.qrcodeUrl" class="device-ledger-detail-qrcode">
<div class="device-ledger-detail-qrcode-title">设备二维码</div>
<QrcodeActionCard
:image-url="detailData.qrcodeUrl"
:print-id="detailData.id || detailData.deviceCode"
:print-title="`${detailData.deviceName || '设备'}码打印预览`"
:print-paper-width="80"
:print-paper-height="80"
:print-max-width="220"
:empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
:error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
:template-json="detailTemplateJson"
:print-data="buildDetailPrintData()"
:show-refresh="false"
/>
<div class="device-ledger-detail-qrcode-desc">扫码查看设备详情</div>
<div class="device-ledger-detail-qrcode-sub">支持点检 / 报修 / 维保</div>
</div>
</div>
<div class="device-ledger-detail-tabs">
@ -602,6 +638,10 @@ const parseImages = (value: any): string[] => {
.filter(Boolean)
}
const deviceImageList = computed(() => parseImages(detailData.value?.images))
const firstDeviceImage = computed(() => deviceImageList.value[0] ?? '')
const deviceManagerName = computed(() => (detailData.value as any)?.deviceManagerName ?? detailData.value?.deviceManager ?? '')
type HistoryStepItem = {
key: string
name: string
@ -905,24 +945,87 @@ onMounted(async () => {
.device-ledger-detail-body {
position: relative;
max-height: 85vh;
padding-top: 2px;
}
.device-ledger-detail-title {
position: absolute;
top: 10px;
left: 0px;
position: relative;
display: flex;
align-items: center;
height: 28px;
color: var(--el-text-color-primary);
font-size: 16px;
font-weight: 600;
line-height: 22px;
}
.device-ledger-detail-title::before {
width: 3px;
height: 16px;
margin-right: 8px;
content: '';
border-radius: 2px;
background: var(--el-color-primary);
}
.device-ledger-detail-main {
display: flex;
min-height: 224px;
padding: 18px 260px 18px 0;
margin-bottom: 10px;
gap: 28px;
box-sizing: border-box;
align-items: center;
}
.device-ledger-detail-images {
display: flex;
width: 260px;
height: 188px;
padding: 12px;
box-sizing: border-box;
flex: 0 0 260px;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid var(--el-border-color-lighter);
border-radius: 8px;
background: linear-gradient(180deg, var(--el-fill-color-blank) 0%, var(--el-fill-color-lighter) 100%);
}
.device-ledger-detail-carousel,
.device-ledger-detail-image {
width: 100%;
}
.device-ledger-detail-image {
height: 164px;
overflow: hidden;
border-radius: 6px;
background: transparent;
}
.device-ledger-detail-image :deep(.el-image__inner) {
object-fit: contain;
}
.device-ledger-detail-image-error {
display: flex;
width: 100%;
height: 100%;
color: var(--el-text-color-secondary);
background: var(--el-fill-color);
align-items: center;
justify-content: center;
}
.device-ledger-detail-desc {
display: flex;
align-items: center;
min-height: 286px;
padding-right: 260px;
margin-bottom: 16px;
min-width: 0;
flex: 1;
min-height: 188px;
}
.device-ledger-detail-desc :deep(.el-descriptions__body) {
@ -936,6 +1039,20 @@ onMounted(async () => {
.device-ledger-detail-desc :deep(.el-descriptions__cell) {
width: 33.3333%;
padding-bottom: 14px;
color: var(--el-text-color-primary);
font-size: 14px;
line-height: 22px;
}
.device-ledger-detail-desc :deep(.el-descriptions__label) {
color: var(--el-text-color-primary);
font-weight: 500;
}
.device-ledger-detail-desc :deep(.el-descriptions__content) {
color: var(--el-text-color-regular);
}
.device-ledger-detail-tabs {
@ -949,19 +1066,20 @@ onMounted(async () => {
.device-ledger-detail-qrcode {
position: absolute;
top: 30px;
right: 100px;
top: 48px;
right: 36px;
display: flex;
width: 184px;
min-height: 226px;
min-height: 214px;
padding: 16px 14px;
box-sizing: border-box;
align-items: center;
justify-content: center;
flex-direction: column;
border: 1px solid var(--el-border-color);
border-radius: 6px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 8px;
background: var(--el-bg-color);
box-shadow: 0 8px 24px rgb(31 45 61 / 6%);
}
.device-ledger-detail-qrcode-title {
@ -977,7 +1095,7 @@ onMounted(async () => {
min-width: 128px;
height: 128px;
border-color: var(--el-border-color-lighter);
border-radius: 4px;
border-radius: 6px;
}
.device-ledger-detail-qrcode :deep(.qrcode-action-card__img) {

Write Preview
Loading…
Cancel
Save