From 1d552a3bad95caae4af15322df28e6240b797693 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 13 Aug 2026 15:32:06 +0800
Subject: [PATCH] feat: app视频封面图
---
applications/task-work-order/src/views/orderView/orderManage/eventManage/ViewDiaLog.vue | 96 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 90 insertions(+), 6 deletions(-)
diff --git a/applications/task-work-order/src/views/orderView/orderManage/eventManage/ViewDiaLog.vue b/applications/task-work-order/src/views/orderView/orderManage/eventManage/ViewDiaLog.vue
index 6a6d831..812f549 100644
--- a/applications/task-work-order/src/views/orderView/orderManage/eventManage/ViewDiaLog.vue
+++ b/applications/task-work-order/src/views/orderView/orderManage/eventManage/ViewDiaLog.vue
@@ -72,12 +72,17 @@
</div>
<div class="img_flow">
<div class="imgurl">
- <el-image
+ <el-image v-if="eventInfo.attachmentType === 1"
:src="eventInfo.eventImageUrl"
:preview-src-list="[eventInfo.eventImageUrl]"
fit="cover"
preview-teleported
/>
+ <div class="video-btn" v-if="eventInfo.attachmentType === 3" @click="videoClick(eventInfo)">
+ <el-icon :size="30" color="#fff">
+ <VideoPlay />
+ </el-icon>
+ </div>
</div>
<div class="flow">
<div v-if="disposeRecords.length === 0">
@@ -86,7 +91,7 @@
<div v-else class="flow-card" v-for="item in disposeRecords" :key="item.id">
<div class="flow-row1">
<span class="flow-name">{{ item.disposeUserName }}</span>
- <span class="flow-status">{{ item.disposeStatusName }}</span>
+ <span class="flow-status card-status" :class="statusClass(item.disposeStatus)">{{ item.disposeStatusName }}</span>
</div>
<div class="flow-row2">{{ item.disposeContent }}</div>
<div class="flow-row3" v-if="item.attachUrl?.length">
@@ -114,6 +119,7 @@
</div>
</div>
</el-dialog>
+ <VideoPlayDialog ref="videoPlayDialogRef" v-if="VideoShow" v-model="VideoShow" :playUrl="eventInfo.eventImageUrl" />
</template>
<script setup>
@@ -121,11 +127,15 @@
import { getDetailFull } from './eventManageApi'
import OrderStepBar from './OrderStepBar.vue'
import { ref } from 'vue'
+import { VideoPlay } from '@element-plus/icons-vue'
+import VideoPlayDialog from '@/components/VideoPlayDialog.vue'
const visible = defineModel()
const eventInfo = ref({})
const disposeRecords = ref([])
const statusFlows = ref([])
+const VideoShow = ref(false)
+const videoPlayDialogRef = ref(null)
// 获取状态文本
const getStatusLabel = status => {
@@ -137,6 +147,14 @@
4: '已完成',
}
return map[status] || '未知'
+}
+
+// 状态样式类名
+const statusClass = status => {
+ if (status === 1) return 'status-processing'
+ if (status === 3) return 'status-handled'
+ if (status === 4) return 'status-completed'
+ return ''
}
// 兼容事件记录接口中不同版本的字段名称
@@ -152,9 +170,15 @@
}
}
+function videoClick(eventInfo) {
+ // currentVideo.value = eventInfo
+ VideoShow.value = true
+}
+
// 打开弹框
async function open({ row } = {}) {
if (!row?.id) return
+ console.log(row, '9098')
const res = await getDetailFull({ id: row.id })
const detail = res?.data?.data || {}
eventInfo.value = detail.eventInfo || {}
@@ -186,10 +210,11 @@
width: 0;
flex: 1;
display: flex;
- overflow-y: auto;
- overflow-x: hidden;
+ //overflow-y: hidden;
+ //overflow-x: hidden;
flex-direction: column;
- scrollbar-width: none;
+ overflow: hidden;
+ //scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
@@ -205,7 +230,7 @@
//border: 1px solid red;
display: flex;
justify-content: space-between;
- height: 436px;
+ height: 440px;
margin-top: 20px;
.imgurl {
flex: 1;
@@ -215,6 +240,44 @@
width: 100%;
}
}
+ .video-btn {
+ width: 100%;
+ height:100%;
+ position: relative;
+ overflow: hidden;
+ border-radius: 4px;
+ background: linear-gradient(135deg, rgba(76, 52, 255, 0.14), rgba(76, 52, 255, 0) 48%),
+ linear-gradient(180deg, #f4f5ff 0%, #e9ecff 100%);
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: linear-gradient(
+ 90deg,
+ rgba(76, 52, 255, 0.05) 0,
+ rgba(76, 52, 255, 0.05) 1px,
+ transparent 1px,
+ transparent 12px
+ );
+ opacity: 0.42;
+ }
+
+ .el-icon {
+ position: relative;
+ z-index: 1;
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ background: rgba(76, 52, 255, 0.72);
+ box-shadow: 0 4px 12px rgba(76, 52, 255, 0.2);
+ }
+ }
.flow {
margin-left: 10px;
flex: 1;
@@ -264,6 +327,25 @@
font-size: 12px;
color: #999;
}
+ .card-status {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ padding: 2px 6px;
+ border-radius: 4px;
+ color: #ffffff;
+ background: #999;
+
+ &.status-processing {
+ background: #1d6fe9;
+ }
+ &.status-handled {
+ background: #e6a23c;
+ }
+ &.status-completed {
+ background: #00b578;
+ }
+ }
}
}
}
@@ -290,6 +372,8 @@
.processBox {
display: flex;
flex-direction: column;
+ height: 650px;
+ overflow: auto;
.process {
height: 100%;
--
Gitblit v1.9.3