380 lines
8.2 KiB
Vue
380 lines
8.2 KiB
Vue
<template>
|
|
<div
|
|
class="preview-container flex"
|
|
:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
|
|
>
|
|
<template v-if="type === 'sketch'">
|
|
<div
|
|
class="sketch-item"
|
|
v-for="(item, index) in sketchList"
|
|
:key="'sketch-item-' + index"
|
|
>
|
|
<el-dropdown trigger="click" class="menu-btn">
|
|
<Menu />
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item class="sketch-item flex align-center">
|
|
<img
|
|
src="@/assets/images/restore-sketch.png"
|
|
class="dropdown-icon restore"
|
|
/>
|
|
<span>Restore</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item
|
|
class="sketch-item flex align-center"
|
|
@click="handleClickDelete(item)"
|
|
>
|
|
<img
|
|
src="@/assets/images/delete.png"
|
|
class="dropdown-icon delete"
|
|
/>
|
|
<span>Delete</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<div
|
|
class="edit-btn flex align-center space-between"
|
|
@click="handleClickEdit(item)"
|
|
>
|
|
<div>Edit</div>
|
|
<img src="@/assets/images/arrow-top-right.png" />
|
|
</div>
|
|
<img
|
|
:src="getImageSrc(item, index)"
|
|
:alt="'sketch-' + index"
|
|
@load="handleImageLoad(index)"
|
|
/>
|
|
</div>
|
|
<div v-show="showLoading" class="sketch-item loading-gif">
|
|
<img src="@/assets/images/sketch-loading.gif" alt="loading" />
|
|
</div>
|
|
</template>
|
|
<div v-else class="reportBorder">
|
|
<div class="report">
|
|
<div v-if="false" class="report-content-null">
|
|
<img :src="reportNull" alt="" />
|
|
</div>
|
|
<div v-else class="report-content">
|
|
<div class="downBtnBox">
|
|
<div class="downBtn">
|
|
<div class="icon">
|
|
<SvgIcon name="reportDown" size="16"></SvgIcon>
|
|
</div>
|
|
<span>{{ $t('agent.Download') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题 <br />
|
|
# 一级标题
|
|
<br />
|
|
# 一级标题
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
|
|
import Menu from './Menu.vue'
|
|
import LoadingImg from '@/assets/images/sketch-loading.gif'
|
|
import reportNull from '@/assets/images/reportNull.png'
|
|
import myEvent from '@/utils/myEvent'
|
|
import { deleteSketchFlowCanvas } from '@/api/flow-canvas'
|
|
import { useProjectStore } from '@/stores'
|
|
const projectStore = useProjectStore()
|
|
import MyEvent from '@/utils/myEvent'
|
|
|
|
const emits = defineEmits(['deleteSketch'])
|
|
|
|
// 存储每个图片的加载状态
|
|
const loadedStatus = ref<boolean>(false)
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
type: 'sketch' | 'report'
|
|
sketchList: Array<string>
|
|
}>(),
|
|
{
|
|
type: 'sketch',
|
|
sketchList: []
|
|
}
|
|
)
|
|
|
|
// 图片加载完成时触发
|
|
const handleImageLoad = (index: number) => {
|
|
loadedStatus[index] = true
|
|
if (index === props.sketchList.length - 1) {
|
|
showLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 获取当前显示的图片源
|
|
const getImageSrc = (item: string, index: number) => {
|
|
if (item === null) {
|
|
return null
|
|
}
|
|
if (typeof item === 'string') {
|
|
return item
|
|
}
|
|
if (typeof item === 'object') {
|
|
return Object.values(item)[0]
|
|
}
|
|
}
|
|
|
|
const handleClickEdit = (item: string | Object) => {
|
|
let url = ''
|
|
let imgId = ''
|
|
let nodeId = ''
|
|
if (typeof item === 'string') {
|
|
url = item
|
|
}
|
|
if (typeof item === 'object') {
|
|
url = Object.values(item)[0]
|
|
imgId = Object.keys(item)[0]
|
|
nodeId = projectStore.state.nodeId
|
|
}
|
|
myEvent.emit('openFlowCanvas', { url, imgId, nodeId })
|
|
}
|
|
|
|
const handleClickDelete = (item: string | Object) => {
|
|
deleteSketchFlowCanvas({
|
|
id: Object.keys(item)[0],
|
|
versionNodeId: projectStore.state.nodeId
|
|
}).then((res) => {
|
|
if (res) {
|
|
ElMessage.success('Delete success')
|
|
emits('deleteSketch', Object.keys(item)[0])
|
|
}
|
|
})
|
|
}
|
|
|
|
const showLoading = ref(false)
|
|
const handleLoadingSketch = () => {
|
|
showLoading.value = true
|
|
}
|
|
watch(
|
|
() => props.sketchList,
|
|
(val) => {
|
|
console.log('-sketchList-', val)
|
|
|
|
if (val.length > 0) {
|
|
showLoading.value = false
|
|
}
|
|
},
|
|
{ deep: true }
|
|
)
|
|
onMounted(() => {
|
|
MyEvent.add('loading-sketch', handleLoadingSketch)
|
|
})
|
|
onUnmounted(() => {
|
|
MyEvent.remove('loading-sketch', handleLoadingSketch)
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.preview-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
gap: 1.2rem;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
align-content: flex-start;
|
|
.sketch-item {
|
|
position: relative;
|
|
width: calc((100% - 1.2rem * 3) / 4);
|
|
//设置比例
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 1.6rem;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 1.6rem;
|
|
}
|
|
:deep(.menu-btn) {
|
|
position: absolute;
|
|
top: 2.1rem;
|
|
right: 1.5rem;
|
|
|
|
.dropdown-icon {
|
|
&.restore {
|
|
width: 1.4rem;
|
|
height: 1.3rem;
|
|
}
|
|
&.delete {
|
|
width: 1.2rem;
|
|
height: 1.3rem;
|
|
}
|
|
}
|
|
}
|
|
.edit-btn {
|
|
position: absolute;
|
|
right: 1rem;
|
|
bottom: 1.1rem;
|
|
width: 7.8rem;
|
|
height: 3.59rem;
|
|
border-radius: 2rem;
|
|
background-color: #fff;
|
|
border: 0.2rem solid #e5e5e5;
|
|
font-size: 1.4rem;
|
|
padding: 0 0.9rem 0 1.4rem;
|
|
cursor: pointer;
|
|
img {
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
}
|
|
}
|
|
}
|
|
.reportBorder {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
--border-width: 3px;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
background: linear-gradient(
|
|
119.03deg,
|
|
rgba(233, 121, 60, 0.3) 1.61%,
|
|
rgba(255, 207, 144, 0.3) 101.01%
|
|
);
|
|
border-radius: 2.3rem;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: -50%;
|
|
top: -50%;
|
|
transform: translate(50%, 50%);
|
|
}
|
|
.report {
|
|
background-color: #fff;
|
|
width: calc(100% - var(--border-width) * 2);
|
|
height: calc(100% - var(--border-width) * 2);
|
|
border-radius: 2rem;
|
|
display: flex;
|
|
.report-content-null {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.report-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
.downBtnBox {
|
|
padding: 2.2rem 5.2rem 0;
|
|
.downBtn {
|
|
display: flex;
|
|
width: 11.2rem;
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
line-height: 3.2rem;
|
|
border-radius: 5px;
|
|
background-color: #ff7a51;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
.icon {
|
|
margin-right: 0.02rem;
|
|
}
|
|
span {
|
|
font-weight: 500;
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
overflow-y: auto;
|
|
margin: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.el-dropdown-menu__item) {
|
|
column-gap: 1.2rem;
|
|
padding: 1.2rem 1.4rem;
|
|
}
|
|
</style>
|