feat:增加视频播放组件

chenyao

2026-04-24 0cd267d7d8263a1b70e69096a54722be492c201c

feat:增加视频播放组件

 applications/task-work-order/src/components/VideoPlayDialog.vue

New file
@@ -0,0 +1,56 @@
<script setup>
const props = defineProps({
    width: {
        type: String,
        default: '800'
    },
    modelValue: {
        type: Boolean,
        default: false
    },
    playUrl: {
        type: String,
        default: ''
    },
    title:{
        type: String,
        default: '视频播放'
    }
})

const emit = defineEmits(['update:modelValue'])
const handleClose = () => {
    emit('update:modelValue', false)
}
</script>

<template>
    <el-dialog
        class="gd-dialog"
        :title="props.title"
        append-to-body
        v-model="props.modelValue"
        width="60%"
        destroy-on-close
        :close-on-click-modal="false"
        @close="handleClose"
    >
        <video ref="videoRefs" controls preload="auto"  :src="props.playUrl">
            <source :src="props.playUrl" type="video/mp4" />
        </video>
        <!--            <el-carousel trigger="click" :autoplay="false" @change="handleCarouselChange">-->
        <!--                <el-carousel-item v-for="(item, index) in videoList" :key="index">-->
        <!--                    <video ref="videoRefs" controls preload="auto"  :src="currentVideoUrl" @play="handleVideoPlay" @ended="handleVideoEnded(index)">-->
        <!--                        <source :src="item.smallUrl" type="video/mp4" />-->
        <!--                    </video>-->
        <!--                </el-carousel-item>-->
        <!--            </el-carousel>-->
    </el-dialog>
</template>

<style scoped lang="scss">
video {
    height: 600px;
    width: 100%;
}
</style>

 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/ViewDiaLog.vue

@@ -80,12 +80,17 @@
                        <div class="imgBox">
                            <div v-for="item in taskResultList">
                                <el-image
                                    v-if="item.resultUrl"
                                    v-if="item.attachmentType === 0 && item.resultUrl"
                                    :src="item.resultUrl"
                                    :preview-src-list="[item.resultUrl]"
                                    fit="cover"
                                    preview-teleported
                                />
                                <div class="video-btn" v-if="item.attachmentType === 1 && item.resultUrl" @click="videoClick(item)">
                                    <el-icon :size="30" color="#fff">
                                        <VideoPlay />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </template>
@@ -244,6 +249,14 @@
            @success="rejectSuccess"
        />
    </el-dialog>

    <VideoPlayDialog
        ref="videoPlayDialogRef"
        v-if="VideoShow"
        v-model="VideoShow"
        :playUrl="currentVideo.resultUrl"
    >
    </VideoPlayDialog>
</template>

<script setup>
@@ -432,11 +445,13 @@
    try {
        const res = await gdTaskResultListApi({ patrolTaskId: formData.value.id })
        taskResultList.value = res?.data?.data ?? []
        console.log(taskResultList.value, '8989')
    } finally {
    }
}
import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
import OrderStepBar from '@/views/orderView/orderManage/orderManage/OrderStepBar.vue'
import VideoPlayDialog from '@/components/VideoPlayDialog.vue'
let arrowLineMaterialProperty = new ArrowLineMaterialProperty({
    color: new Cesium.Color(128 / 255, 215 / 255, 255 / 255, 1),
    directionColor: new Cesium.Color(1, 1, 1, 1),
@@ -529,6 +544,14 @@
    }
}

// 点击视频
let VideoShow = ref(false)
let currentVideo = ref({})
function videoClick(row) {
    VideoShow.value = true
    currentVideo.value = row
}

// 初始化地图实例
function initMap() {
    if (viewer) return
@@ -575,6 +598,15 @@
        width: 100%;
        height: 100%;
    }
    .video-btn {
        width: 100%;
        height: 100%;
        background-color: #9E9E9E;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}
:deep(.el-timeline-item__timestamp) {
    font-size: 12px;

 applications/task-work-order/src/views/orderView/orderManage/orderManage/outcomeData.vue

@@ -10,7 +10,7 @@
          v-model="searchParams.patrolTaskIds"
          placeholder="请选择"
          clearable
          

          multiple
          @change="handleSearch"
        >
@@ -22,7 +22,7 @@
          />
        </el-select>
      </el-form-item>
      

      <el-form-item >
        <el-button :icon="RefreshRight" @click="resetForm"></el-button>
        <el-button :icon="Search" color="#383874" @click="handleSearch"></el-button>
@@ -36,17 +36,21 @@
        <el-table class="gd-table" :data="list" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="46" />
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column label="图片" >
          <el-table-column label="图片/视频" >
            <template v-slot="{ row }">
              <el-image
                v-if="row.resultUrl"
                v-if="row.attachmentType ===0 && row.resultUrl"
                :src="row.resultUrl"
                :preview-src-list="[row.resultUrl]"
                fit="cover"
                style="width: 80px; height: 80px; border-radius: 4px;"
                                preview-teleported
              />
              <span v-else>-</span>
                            <div class="video-btn" v-if="row.attachmentType === 1 && row.resultUrl" @click="videoClick(row)">
                                <el-icon :size="30" color="#fff">
                                    <VideoPlay />
                                </el-icon>
                            </div>
            </template>
          </el-table-column>
          <el-table-column prop="patrolTaskName" show-overflow-tooltip label="巡查任务名称" />
@@ -72,6 +76,13 @@
      </div>
    </div>
  </div>
 <VideoPlayDialog
     ref="videoPlayDialogRef"
     v-if="VideoShow"
     v-model="VideoShow"
     :playUrl="currentVideo.resultUrl"
         >
 </VideoPlayDialog>
</template>

<script setup>
@@ -80,6 +91,7 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDictLabel } from '@ztzf/utils'
import dayjs from 'dayjs'
import VideoPlayDialog from '@/components/VideoPlayDialog.vue'

const props = defineProps({
  workOrderId: {
@@ -124,8 +136,8 @@
    const res = await gdTaskResultPageApi({
      ...searchParams.value,
      workOrderId: props.workOrderId,
      patrolTaskIds: searchParams.value.patrolTaskIds.length 
        ? searchParams.value.patrolTaskIds.join(',') 
      patrolTaskIds: searchParams.value.patrolTaskIds.length
        ? searchParams.value.patrolTaskIds.join(',')
        : ''
    })
    list.value = res?.data?.data?.records || []
@@ -230,6 +242,14 @@
  }
}

// 点击视频
let VideoShow = ref(false)
let currentVideo = ref({})
function videoClick(row) {
    VideoShow.value = true
  currentVideo.value = row
}

// 监听 workOrderId 变化
watch(
    () => props.workOrderId,
@@ -254,17 +274,29 @@
  display: flex;
  flex-direction: column;
  overflow: hidden;
  

  .gd-table-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    

    .gd-table-content {
      flex: 1;
      overflow: auto;
    }
        .video-btn {
            width: 80px;
            height: 80px;
            background-color: #9E9E9E;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            cursor: pointer;
        }
  }


}
</style>
</style>