bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 设备详情代码结构调整

Browse Source
This commit is contained in:
nightdays 2025-11-14 17:49:15 +08:00
parent acdaabe203
commit 762710ad47
1 changed files with 34 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
packages/screen/src/views/EquipmentManagement/detailDialog.vue
View File

@ -11,37 +11,25 @@
</template>
<div v-if="equipment" class="drawer-content">
<!-- 基础信息 -->
<div class="info-box">
<div class="info-title-block">
<span class="title-text">基础信息</span>
</div>
<div class="info-content-block flex">
<div class="left-wrapper">
<div class="info-item-list-wrapper">
<div class="info-item" v-for="(item, index) in showDataConfig['基础信息']" :key="index">
<div class="label">{{ item.label }}</div>
<div class="value">{{ equipment[item.name] }}</div>
</div>
</div>
<div class="basic-info-area">
<DetailInfoBox :data="equipment" :title="'基础信息'" :dataConfig="showDataConfig['基础信息']" />
<div class="right-wrapper">
<div>
<el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
<el-tag v-if="equipment.sbzt === '损坏'" type="danger" size="small">损坏</el-tag>
<el-tag v-if="equipment.sbzt === '报废'" type="danger" size="small">报废</el-tag>
</div>
<div class="right-wrapper">
<div>
<el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
<el-tag v-if="equipment.sbzt === '损坏'" type="danger" size="small">损坏</el-tag>
<el-tag v-if="equipment.sbzt === '报废'" type="danger" size="small">报废</el-tag>
</div>
<div class="photo-block">
<el-image v-if="defaultPhoto" style="width: 100%; height: 100%" :src="defaultPhoto" :zoom-rate="1.2"
:max-scale="7" :min-scale="0.2" :preview-src-list="photos" show-progress :initial-index="4"
fit="cover" />
<div v-else class="no-photo">
<span>暂无图片</span>
</div>
<div class="photo-block">
<el-image v-if="defaultPhoto" style="width: 100%; height: 100%" :src="defaultPhoto" :zoom-rate="1.2"
:max-scale="7" :min-scale="0.2" :preview-src-list="photos" show-progress :initial-index="4"
fit="cover" />
<div v-else class="no-photo">
<span>暂无图片</span>
</div>
</div>
</div>
</div>
<!-- 设备位置 -->
<DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备位置'" :dataConfig="showDataConfig['设备位置']" />
@ -171,81 +159,29 @@ defineExpose({
}
}
.info-box {
width: 100%;
.basic-info-area {
position: relative;
.info-title-block {
margin: 10px 0;
.title-text {
font-size: 16px;
font-weight: 600;
}
}
.info-content-block {
width: 100%;
padding: 15px;
background-color: #fff;
border-radius: 6px;
.info-item-list-wrapper {
display: grid;
width: 100%;
row-gap: 15px;
.info-item {
display: flex;
align-items: center;
width: 100%;
.label {
display: flex;
align-items: center;
font-size: 14px;
margin-right: 10px;
line-height: 14px;
white-space: nowrap;
&::after {
content: ":"
}
}
.value {
line-height: 14px;
font-size: 14px;
white-space: nowrap;
}
}
}
}
.info-content-block.flex {
.right-wrapper {
position: absolute;
top: 45px;
right: 50px;
display: flex;
justify-content: space-between;
gap: 30px;
.right-wrapper {
display: flex;
gap: 30px;
.photo-block {
width: 150px;
height: 167px;
.photo-block {
width: 150px;
height: 167px;
.no-photo {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
border-radius: 6px;
color: #999;
}
.no-photo {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
border-radius: 6px;
color: #999;
}
}
}