| | |
| | | </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"> |
| | |
| | | <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"> |
| | |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | <VideoPlayDialog ref="videoPlayDialogRef" v-if="VideoShow" v-model="VideoShow" :playUrl="eventInfo.eventImageUrl" /> |
| | | </template> |
| | | |
| | | <script setup> |
| | |
| | | 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 => { |
| | |
| | | 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 '' |
| | | } |
| | | |
| | | // 兼容事件记录接口中不同版本的字段名称 |
| | |
| | | } |
| | | } |
| | | |
| | | 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 || {} |
| | |
| | | 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; |
| | |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .processBox { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 650px; |
| | | overflow: auto; |
| | | |
| | | .process { |
| | | height: 100%; |