Commit 24e905c6 authored by “yiyousong”'s avatar “yiyousong”

perf: 优化评价记录报表多媒体展示

parent c8bb361a
......@@ -778,12 +778,6 @@ img {
// }
// }
.anticon-sound {
font-size: 20px;
color: #1890ff;
cursor: pointer;
}
// 统一设置表格为空时的展示
.ant-table-tbody {
......
......@@ -123,32 +123,55 @@
<span class="flex">
<span class="lable">评价人照片:</span>
<span v-if="detailsInfo.picture || detailsInfo.process">
<img
v-if="detailsInfo.picture"
:src="baseurl + '/' + detailsInfo.picture"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="
$viewerApi({
images: [baseurl + '/' + detailsInfo.picture],
})
"
/>
<video
<a-tooltip v-if="detailsInfo.picture" title="照片">
<a-avatar
class="cursor-pointer"
@click="
$viewerApi({
images: [baseurl + '/' + detailsInfo.picture],
})
"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="picture"
/>
</a-tooltip>
<a-tooltip
v-else-if="
detailsInfo.process &&
estimateVideo(detailsInfo.process)
"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + detailsInfo.process"
@click="checkMultimedia(detailsInfo.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(detailsInfo.process)"
/>
title="视频"
>
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(detailsInfo.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="video-camera"
/>
</a-tooltip>
<a-tooltip v-else title="音频">
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(detailsInfo.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="sound"
/>
</a-tooltip>
</span>
<a-avatar v-else shape="square" :size="40" icon="user" />
<a-tooltip v-else title="无资源">
<a-avatar
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="ellipsis"
/>
</a-tooltip>
</span>
</a-col>
</a-row>
......@@ -371,32 +394,55 @@
<span class="flex">
<span class="lable">评价人照片:</span>
<span v-if="detailsInfo.picture || detailsInfo.process">
<img
v-if="detailsInfo.picture"
:src="baseurl + '/' + detailsInfo.picture"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="
$viewerApi({
images: [baseurl + '/' + detailsInfo.picture],
})
"
/>
<video
<a-tooltip v-if="detailsInfo.picture" title="照片">
<a-avatar
class="cursor-pointer"
@click="
$viewerApi({
images: [baseurl + '/' + detailsInfo.picture],
})
"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="picture"
/>
</a-tooltip>
<a-tooltip
v-else-if="
detailsInfo.process &&
estimateVideo(detailsInfo.process)
"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + detailsInfo.process"
@click="checkMultimedia(detailsInfo.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(detailsInfo.process)"
/>
title="视频"
>
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(detailsInfo.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="video-camera"
/>
</a-tooltip>
<a-tooltip v-else title="音频">
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(detailsInfo.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="sound"
/>
</a-tooltip>
</span>
<a-avatar v-else shape="square" :size="40" icon="user" />
<a-tooltip v-else title="无资源">
<a-avatar
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="ellipsis"
/>
</a-tooltip>
</span>
</a-col>
</a-row>
......@@ -504,6 +550,7 @@ export default {
// 查看音视频
checkMultimedia(url) {
console.log(url);
let isVideo = this.estimateVideo(url);
let curUrl = this.baseurl + "/" + url;
if (isVideo) {
......
......@@ -26,25 +26,48 @@
<!-- 评价人照片 -->
<template slot="picture" slot-scope="text, record">
<div v-if="text || record.process">
<img
v-if="text"
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<video
<a-tooltip v-if="text" title="照片">
<a-avatar
class="cursor-pointer"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="picture"
/>
</a-tooltip>
<a-tooltip
v-else-if="record.process && estimateVideo(record.process)"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + record.process"
@click="checkMultimedia(record.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(record.process)"
/>
title="视频"
>
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(record.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="video-camera"
/>
</a-tooltip>
<a-tooltip v-else title="音频">
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(record.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="sound"
/>
</a-tooltip>
</div>
<a-avatar v-else shape="square" :size="40" icon="user" />
<a-tooltip v-else title="无资源">
<a-avatar
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="ellipsis"
/>
</a-tooltip>
</template>
<!-- 操作 -->
......
......@@ -25,25 +25,48 @@
<!-- 评价人照片 -->
<template slot="picture" slot-scope="text, record">
<div v-if="text || record.process">
<img
v-if="text"
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<video
<a-tooltip v-if="text" title="照片">
<a-avatar
class="cursor-pointer"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="picture"
/>
</a-tooltip>
<a-tooltip
v-else-if="record.process && estimateVideo(record.process)"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + record.process"
@click="checkMultimedia(record.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(record.process)"
/>
title="视频"
>
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(record.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="video-camera"
/>
</a-tooltip>
<a-tooltip v-else title="音频">
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(record.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="sound"
/>
</a-tooltip>
</div>
<a-avatar v-else shape="square" :size="40" icon="user" />
<a-tooltip v-else title="无资源">
<a-avatar
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="ellipsis"
/>
</a-tooltip>
</template>
<!-- 操作 -->
......
......@@ -26,27 +26,49 @@
<!-- 评价人照片 -->
<template slot="picture" slot-scope="text, record">
<div v-if="text || record.process">
<img
v-if="text"
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<video
<a-tooltip v-if="text" title="照片">
<a-avatar
class="cursor-pointer"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="picture"
/>
</a-tooltip>
<a-tooltip
v-else-if="record.process && estimateVideo(record.process)"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + record.process"
@click="checkMultimedia(record.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(record.process)"
/>
title="视频"
>
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(record.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="video-camera"
/>
</a-tooltip>
<a-tooltip v-else title="音频">
<a-avatar
class="cursor-pointer"
@click="checkMultimedia(record.process)"
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="sound"
/>
</a-tooltip>
</div>
<a-avatar v-else shape="square" :size="40" icon="user" />
<a-tooltip v-else title="无资源">
<a-avatar
shape="square"
style="background-color: #e6f7ff; color: #1890ff"
:size="40"
icon="ellipsis"
/>
</a-tooltip>
</template>
<!-- 操作 -->
<template slot="action" slot-scope="text, record">
<a-space>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment