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

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

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