| | |
| | | :width="pxToRem(1800)" :close-on-click-modal="false" :destroy-on-close="true"> |
| | | <div class="content"> |
| | | <div class="contentLeft"> |
| | | <div class="machineTableDetailsTitle"><span>详情</span></div> |
| | | <div class="machineTableDetailsTitle"><img src="/src/assets/images/task/sign.svg" alt=""><span>详情</span></div> |
| | | <div class="infoBox"> |
| | | <div class="itemBoxLeft"> |
| | | <div v-for="(item, index) in infoList" :key="index" class="itemCon"> |
| | |
| | | </div> |
| | | <JobRelatedEvents :jobTimes="jobTimes" :batchNo="batchNo" /> |
| | | <div class="devicetitle" v-if="isShow"> |
| | | <div> |
| | | <img src="/src/assets/images/task/sign.svg" alt=""> |
| | | <p> |
| | | 成果数据 |
| | | <span>{{ total }}</span> |
| | | 个 |
| | | </p> |
| | | </div> |
| | | <div class="rightBox" v-if="total"> |
| | | <div class="downloadBtn" @click="htlsrwxq === 100 && downloadFun()"> |
| | | <el-progress v-if="htlsrwxq !== 100" :percentage="htlsrwxq" :show-text="false" striped striped-flow :duration="1" /> |
| | |
| | | ref="fullscreenVideo" |
| | | class="fullscreen-video" |
| | | :src="currentVideoUrl" |
| | | :style="{ width: pxToRem(1600), height: '80vh' }" |
| | | :style="{ width: pxToRem(1567), height: '80vh' }" |
| | | controls |
| | | autoplay |
| | | preload="auto" |
| | | @play="handleVideoPlay" |
| | | @ended="handleVideoEnded" |
| | | ></video> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | |
| | | <script setup> |
| | | import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; |
| | | import { getShowImg, getSmallImg, getzsSmallImg,getzsShowImg } from '@/utils/util'; |
| | | import { getShowImg, getSmallImg, getzsSmallImg, getzsShowImg, aLinkDownloadUtil } from '@/utils/util'; |
| | | import { getaiImagesPageAPI,cancelDownloadApi,getDownloadStatusApi,attachDownload,aiImagesPage} from '@/api/dataCenter/dataCenter'; |
| | | import { pxToRem } from '@/utils/rem' |
| | | import JobRelatedEvents from './JobRelatedEvents.vue' |
| | |
| | | import { droneEventList } from '../const/drc' |
| | | import { ElMessage,ElLoading } from 'element-plus' |
| | | import { useStore } from 'vuex'; |
| | | import EventBus from '@/utils/eventBus'; |
| | | const store = useStore(); |
| | | const htlsrwxq = computed(() => store.state.common.downloadProgress?.htlsrwxq || 100) |
| | | const isShow = defineModel('show') |
| | | const VideoShow = ref(false) |
| | | const showAll = ref(false) // 是否展示全部 |
| | | let loadingData |
| | | const fullscreenVideo = ref(null) |
| | | // 视频播放事件处理 |
| | | const handleVideoPlay = (event) => { |
| | | if (event.target.playbackRate !== 0.75) { |
| | | event.target.playbackRate = 0.75 |
| | | |
| | | } |
| | | } |
| | | const handleVideoEnded = index => { |
| | | // 获取当前视频 |
| | | const video = fullscreenVideo.value |
| | | |
| | | // 重置视频播放时间为 0 |
| | | video.currentTime = 0 |
| | | |
| | | // 重新加载视频 |
| | | video.load() |
| | | } |
| | | // 原图 |
| | | const yuanImages = ref([]) |
| | | function convertVideoUrlToThumbnail(videoUrl) { |
| | |
| | | return videoUrl.replace(/\.mp4$/, '_small.jpg') |
| | | } |
| | | const infoList = ref([ |
| | | { name: '任务编号', value: '', field: 'job_info_num' }, |
| | | { name: '任务名称', value: '', field: 'name' }, |
| | | { name: '任务类型', value: '', field: 'industry_type_str' }, |
| | | { name: '飞行事件', value: '', field: 'event_number' }, |
| | | { name: '所属机巢', value: '', field: 'device_names' }, |
| | | { name: '所属单位', value: '', field: 'dept_name' }, |
| | | { name: '任务时间', value: '', field: 'cycle_time_value' }, |
| | | { name: '关联算法', value: '', field: 'ai_type_str' }, |
| | | { name: '任务描述', value: '', field: 'remark' }, |
| | | // { name: '任务执行次数', value: '', field: 'job_num' }, |
| | | { name: '任务编号', value: '', field: 'job_info_num' }, |
| | | { name: '任务名称', value: '', field: 'name' }, |
| | | { name: '任务类型', value: '', field: 'industry_type_str' }, |
| | | { name: '飞行事件', value: '', field: 'event_number' }, |
| | | { name: '所属机巢', value: '', field: 'device_names' }, |
| | | { name: '所属部门', value: '', field: 'dept_name' }, |
| | | { name: '任务时间', value: '', field: 'cycle_time_value' }, |
| | | { name: '关联算法', value: '', field: 'ai_type_str' }, |
| | | { name: '自定义识别区', value: '', field: 'enable_custom_area' }, |
| | | { name: '创建人', value: '', field: 'creator_name' }, |
| | | { name: '任务描述', value: '', field: 'remark' }, |
| | | // { name: '任务执行次数', value: '', field: 'job_num' }, |
| | | ]) |
| | | // 机巢状态 |
| | | const flystatus = ref('') |
| | | const detailsData = ref({ |
| | | id: null, |
| | | remark: null, |
| | | is_monitoring: null, |
| | | industry_type_str: null, |
| | | area_code: null, |
| | | ai_type_str: null, |
| | | begin_time: null, |
| | | end_time: null, |
| | | device_names: null, |
| | | create_time: null, |
| | | name: null, |
| | | event_number: null, |
| | | creator_name: null, |
| | | way_lines: [], |
| | | id: null, |
| | | remark: null, |
| | | is_monitoring: null, |
| | | industry_type_str: null, |
| | | area_code: null, |
| | | ai_type_str: null, |
| | | enable_custom_area:null, |
| | | begin_time: null, |
| | | end_time: null, |
| | | device_names: null, |
| | | create_time: null, |
| | | name: null, |
| | | event_number: null, |
| | | creator_name: null, |
| | | way_lines: [], |
| | | }) |
| | | // 任务成果 |
| | | const total = ref(0) |
| | |
| | | droneEventList.filter(({ value }) => actionActuatorFunc === value) |
| | | ) |
| | | } |
| | | if (item.name === '自定义识别区') { |
| | | item.value = res.data.data.enable_custom_area ? '是': '否' |
| | | } |
| | | getJobsAllFiles({ |
| | | wayLineJobId: detailsData.value.way_lines.map(item => item.job_id).join(','), |
| | | resultTypes: [0, 2, 4, 5], |
| | |
| | | // 播放 |
| | | const videoRef = ref(null); |
| | | const currentVideoIndex = ref(-1) |
| | | const fullscreenVideo = ref(null) |
| | | |
| | | const enterFullScreen = (index) => { |
| | | currentVideoIndex.value = index |
| | | VideoShow.value = true |
| | |
| | | if (!list?.length) return ElMessage.warning('请选择文件') |
| | | if (list.length === 1) { |
| | | list.forEach((item, index) => { |
| | | const suffix = item.url.split('.').pop() |
| | | aLinkDownloadUtil(item.url, item.nickName + '.' + suffix) |
| | | const suffix = item.link.split('.').pop() |
| | | aLinkDownloadUtil(item.link, item.nickName + '.' + suffix) |
| | | }) |
| | | } else { |
| | | loadingData = ElLoading.service({ background: 'rgba(0, 0, 0, 0.5)', text: '打包中,请稍等...' }) |
| | |
| | | function cancelDownload() { |
| | | cancelDownloadApi({ type:'htlsrwxq' }).then(res =>{ |
| | | ElMessage.success('取消成功') |
| | | }) |
| | | }).catch(e =>{ |
| | | EventBus.emit('useGlobalWS-messageHandler', {biz_code: 'DOWNLOAD_PROGRESS',data:{status: 'CANCELLED',type:'htlsrwxq'}}) |
| | | }) |
| | | } |
| | | onMounted(() => { |
| | | getDetails() |
| | |
| | | |
| | | .machineTableDetailsTitle { |
| | | margin-bottom: 10px; |
| | | background: url('/src/assets/images/task/detailtitle.png') no-repeat center; |
| | | // background: url('/src/assets/images/task/detailtitle.png') no-repeat center; |
| | | border-bottom: 2px solid #e4e7ed; |
| | | background-size: 100% 100%; |
| | | |
| | | img{ |
| | | width: 15px; |
| | | height: 15px;} |
| | | span { |
| | | display: inline-block; |
| | | margin-left: 30px; |
| | | margin-left: 10px; |
| | | font-size: 16px; |
| | | color: #0282ff; |
| | | // color: #0282ff; |
| | | color: #303133; |
| | | line-height: 20px; |
| | | text-align: left; |
| | | margin-bottom: 8px; |
| | |
| | | |
| | | .devicetitle { |
| | | margin-bottom: 16px; |
| | | background: url('/src/assets/images/task/detailtitle.png') no-repeat center; |
| | | // background: url('/src/assets/images/task/detailtitle.png') no-repeat center; |
| | | border-bottom: 2px solid #e4e7ed; |
| | | background-size: 100% 100%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-content: center; |
| | | .rightBox{ |
| | | .rightBox{ |
| | | display: flex; |
| | | align-items: center; |
| | | padding-right: 10px; |
| | |
| | | |
| | | } |
| | | } |
| | | img{ |
| | | width: 15px; |
| | | height: 15px;} |
| | | p { |
| | | display: inline-block; |
| | | margin-left: 30px; |
| | | margin-left: 10px; |
| | | font-size: 16px; |
| | | color: #363636; |
| | | line-height: 20px; |