8 changed files with 407 additions and 29 deletions
@ -0,0 +1,321 @@
|
||||
<template> |
||||
<basic-container> |
||||
<div class="avue-crud" v-loading="details.loadingObj.pageLoading"> |
||||
<!-- 线路标题 --> |
||||
<div class="VehicleLineImgs_title">路 线</div> |
||||
|
||||
<div class="VehicleLineImgs_line"> |
||||
<div |
||||
:class="{ |
||||
VehicleLineNode_item: true, |
||||
notActive: false, |
||||
choose: false, |
||||
}" |
||||
> |
||||
<div class="VehicleLineNode_item_container"> |
||||
<!-- <el-icon size="20px" color=""><Box /></el-icon> --> |
||||
<el-icon size="20px"><CircleCheck /></el-icon> |
||||
<span class="VehicleLineNode_item_title">龙泉仓</span> |
||||
</div> |
||||
|
||||
<el-icon><ArrowRight /></el-icon> |
||||
</div> |
||||
|
||||
<div |
||||
:class="{ |
||||
VehicleLineNode_item: true, |
||||
notActive: false, |
||||
choose: true, |
||||
}" |
||||
> |
||||
<div class="VehicleLineNode_item_container"> |
||||
<el-icon size="20px" color=""><Box /></el-icon> |
||||
|
||||
<span class="VehicleLineNode_item_title">龙泉仓</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 节点图片 --> |
||||
<div class="VehicleLineImgs_title"> |
||||
<span> 图 片 </span> |
||||
</div> |
||||
|
||||
<!-- 图片容器 --> |
||||
<div class="VehicleLineImgs_container"> |
||||
<div class="VehicleLineImgs_container_title">发车前图片</div> |
||||
<div |
||||
class="VehicleLineImgs_container_list" |
||||
v-for="(item, index) in details.beforeLoadImgArr" |
||||
:key="item.type + '-' + item.position" |
||||
> |
||||
<div class="title">{{ item.title }}</div> |
||||
|
||||
<div class="item"> |
||||
<el-image |
||||
v-for="(value, i) in item.imgArr" |
||||
:key="value.url" |
||||
style="width: 150px; height: 150px; margin: 5px; border-radius: 5px" |
||||
:src="value.url" |
||||
:zoom-rate="1.2" |
||||
:max-scale="7" |
||||
:min-scale="0.2" |
||||
:preview-src-list="item.imgArr.map(val => val.url)" |
||||
:initial-index="index" |
||||
fit="cover" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="VehicleLineImgs_container_title">发车前图片</div> |
||||
<div class="VehicleLineImgs_container_list"> |
||||
<div class="VehicleLineImgs_container_list_item"></div> |
||||
</div> |
||||
|
||||
<div class="VehicleLineImgs_container_title">发车前图片</div> |
||||
<div class="VehicleLineImgs_container_list"> |
||||
<div class="VehicleLineImgs_container_list_item"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue'; |
||||
/** 获取字典 */ |
||||
import { getDictionaryBiz } from '@/api/system/dict'; |
||||
import { deepClone, getObjType, ChecksWhetherTheWarehouseIsSelected } from '@/utils/util'; |
||||
import { postFindLinePhoto } from '@/api/distribution/VehicleArrivalManagement'; |
||||
import { useStore } from 'vuex'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
||||
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||
|
||||
const $route = useRoute(); |
||||
const $router = useRouter(); |
||||
const $store = useStore(); |
||||
|
||||
type ImgArr = |
||||
| [ |
||||
{ |
||||
// 分类标题 |
||||
title: string; |
||||
// 类型 |
||||
type: string; |
||||
// 位置 |
||||
position: string; |
||||
// 图片数组 |
||||
imgArr: |
||||
| [ |
||||
{ |
||||
url: string; |
||||
} |
||||
] |
||||
| []; |
||||
} |
||||
] |
||||
| []; |
||||
|
||||
const details = reactive({ |
||||
loadingObj: { |
||||
pageLoading: false, |
||||
}, |
||||
nodeImgArr: [], |
||||
/** 装车前图片 */ |
||||
beforeLoadImgArr: [ |
||||
{ |
||||
title: '123', |
||||
type: '1', |
||||
position: '2', |
||||
imgArr: [ |
||||
{ |
||||
url: '', |
||||
}, |
||||
], |
||||
}, |
||||
] as ImgArr, |
||||
/** 发车前图片 */ |
||||
boforeStartImgArr: [] as ImgArr, |
||||
/** 卸车完成图片 */ |
||||
confirmUnloadImgArr: [] as ImgArr, |
||||
}); |
||||
|
||||
/** 配载图片显示 */ |
||||
const initImgList = async () => { |
||||
try { |
||||
details.loadingObj.pageLoading = true; |
||||
const res = await postFindLinePhoto({ loadId: $route.query.loadId }); |
||||
const { code, data } = res.data; |
||||
if (code !== 200 || getObjType(data) !== 'array') return; |
||||
|
||||
for (let i = 0; i < data.length; i++) { |
||||
const value = data[i]; |
||||
const { loadingObject, startObject, unloadObject } = value; |
||||
|
||||
// 装车前 |
||||
if (getObjType(loadingObject) === 'object') { |
||||
} else details.beforeLoadImgArr = []; |
||||
|
||||
// 发车前 |
||||
if (getObjType(startObject) === 'object') { |
||||
} else details.beforeLoadImgArr = []; |
||||
|
||||
// 卸车前 |
||||
if (getObjType(unloadObject) === 'object') { |
||||
} else details.beforeLoadImgArr = []; |
||||
} |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
details.loadingObj.pageLoading = false; |
||||
} |
||||
}; |
||||
|
||||
initImgList(); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.VehicleLineImgs_title { |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
color: var(--el-color-primary); |
||||
|
||||
&::before { |
||||
content: ''; |
||||
width: 3px; |
||||
height: 20px; |
||||
background-color: var(--el-color-primary); |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
&::after { |
||||
content: ''; |
||||
height: 1px; |
||||
flex: 1; |
||||
background-color: var(--el-color-primary); |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
|
||||
// 路线 |
||||
.VehicleLineImgs_line { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
// 节点 |
||||
.VehicleLineNode_item { |
||||
$transition: all 0.3s; |
||||
$activeColor: #0bc80b; |
||||
$disabled: #808080 !important ; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
width: fit-content; |
||||
flex: none; |
||||
margin: 5px 0; |
||||
background-color: #f5f7fa; |
||||
|
||||
// 未激活状态 |
||||
&.notActive { |
||||
:deep(.el-icon) { |
||||
color: $disabled; |
||||
} |
||||
.VehicleLineNode_item_title { |
||||
color: $disabled; |
||||
} |
||||
|
||||
.VehicleLineNode_item_container { |
||||
background-color: #fff !important; |
||||
cursor: no-drop; |
||||
} |
||||
} |
||||
|
||||
// 选中状态 |
||||
&.choose { |
||||
.VehicleLineNode_item_container { |
||||
:deep(.el-icon) { |
||||
color: $activeColor !important; |
||||
} |
||||
.VehicleLineNode_item_title { |
||||
color: $activeColor !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 节点容器 |
||||
.VehicleLineNode_item_container { |
||||
transition: $transition; |
||||
padding: 10px 60px; |
||||
border-radius: 5px; |
||||
display: flex; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
border-radius: 10px; |
||||
|
||||
&:hover { |
||||
background-color: #daffda; |
||||
border-color: #0bc80b; |
||||
|
||||
:deep(.el-icon) { |
||||
color: #0bc80b; |
||||
} |
||||
.VehicleLineNode_item_title { |
||||
color: #0bc80b; |
||||
} |
||||
} |
||||
|
||||
:deep(.el-icon) { |
||||
color: var(--el-color-primary); |
||||
transition: $transition; |
||||
} |
||||
|
||||
.VehicleLineNode_item_title { |
||||
margin-left: 5px; |
||||
font-size: 16px; |
||||
color: var(--el-color-primary); |
||||
transition: $transition; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 图片 |
||||
.VehicleLineImgs_container { |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
// 图片节点标题 |
||||
.VehicleLineImgs_container_title { |
||||
@extend .VehicleLineImgs_title; |
||||
font-size: 16px; |
||||
|
||||
&:first-child { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
&::after { |
||||
flex: none; |
||||
width: 0; |
||||
} |
||||
} |
||||
|
||||
.VehicleLineImgs_container_list { |
||||
padding: 20px; |
||||
|
||||
.title { |
||||
@extend .VehicleLineImgs_container_title; |
||||
|
||||
&:first-child { |
||||
margin-top: 0px; |
||||
} |
||||
} |
||||
|
||||
.item { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue