From a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:49:12 +0800
Subject: [PATCH] feat:事件弹窗显示调整
---
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue | 197 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 143 insertions(+), 54 deletions(-)
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue
index d7be14f..d4cc8c7 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue
@@ -1,6 +1,7 @@
-<!-- 任务详情 -->
+<!-- 历史任务详情 -->
<template>
<el-dialog
+ class="ztzf-dialog"
append-to-body
modal-class="detailsOfHistoricalTasks"
v-model="isShow"
@@ -11,29 +12,52 @@
>
<div class="content">
<div class="contentLeft">
- <el-divider content-position="left">详情</el-divider>
+ <div class="machineTableDetailsTitle"><span>详情</span></div>
<div class="infoBox">
- <div class="itemBox" v-for="item in infoList">
- <div class="itemTitle">{{ item.name }}：</div>
- <div class="itemValue">{{ item.value }}</div>
+ <div class="itemBoxLeft">
+ <div v-for="(item, index) in infoList" :key="index">
+ <div class="itemBox">
+ <div class="itemTitle">{{ item.name }}：</div>
+ <div class="itemValue">{{ item.value ? item.value : '' }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="itemBoxRight">
+ <div class="itemTitle">关联算法：</div>
+ <div class="itemValue">{{ flystatus ? flystatus :'' }}</div>
</div>
</div>
<JobRelatedEvents v-if="isShow" />
- <el-divider content-position="left">任务成果 xxx个</el-divider>
+ <div class="devicetitle" v-if="isShow">
+ <p>
+ 任务成果
+ <span>{{ total }}</span>
+ 个
+ </p>
+ <p class="more">更多</p>
+ </div>
<div class="imgListBox">
- <el-image
- class="imgItem"
- v-for="(item, index) in achievementList"
- :src="item.url"
- :preview-src-list="achievementList.map(i => i.url)"
- show-progress
- preview-teleported
- :initial-index="index"
- fit="cover"
- />
+ <!-- 图片显示 -->
+ <template v-if="mediaType === 'image'">
+ <el-image
+ class="imgItem"
+ v-for="(item, index) in achievementList"
+ :key="index"
+ :src="item.url"
+ :preview-src-list="achievementList.map(i => i.url)"
+ show-progress
+ preview-teleported
+ :initial-index="index"
+ fit="cover"
+ />
+ </template>
+ <!-- 视频显示 -->
+ <template v-else-if="mediaType === 'video'">
+ <video v-for="(item, index) in achievementList" :key="index" :src="item.url" controls></video>
+ </template>
</div>
</div>
- <DeviceJobDetailsMap v-if="isShow" class="contentRight" :detailsData="detailsData"/>
+ <DeviceJobDetailsMap v-if="isShow" class="contentRight" :detailsData="detailsData" />
</div>
</el-dialog>
</template>
@@ -43,22 +67,20 @@
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getJobDetails, getJobInfoFiles } from '@/api/home/task'
import DeviceJobDetailsMap from './DeviceJobDetailsMap.vue'
-
const isShow = defineModel('show')
-
const infoList = ref([
- { name: '任务编号', value: '', field: 'id' },
+ { name: '任务编号', value: '', field: 'job info num' },
{ name: '任务所属机巢', value: '', field: 'device_names' },
- { name: '关联算法', value: '', field: 'ai_type_str' },
{ name: '任务名称', value: '', field: 'name' },
{ name: '所属单位', value: '', field: 'dept_name' },
{ name: '任务类型', value: '', field: 'industry_type_str' },
+ { name: '任务时间', value: '', field: 'begin_time' + ' - ' + 'end_time' },
{ name: '飞行事件', value: '', field: 'event_number' },
- { name: '任务周期', value: '', field: 'rep_rule_val' },
- { name: '任务频次', value: '', field: 'rep_fre_val' },
+ { name: '任务频次', value: '', field: 'rep_rule_type' + ' - ' + 'rep_rule_val' },
{ name: '任务描述', value: '', field: 'remark' },
])
-
+// 机巢状态
+const flystatus = ref('')
const detailsData = ref({
id: null,
remark: null,
@@ -75,21 +97,38 @@
creator_name: null,
way_lines: [],
})
-
+// 任务成果
+const mediaType = ref('')
+const total = ref(0)
const achievementList = ref([])
-
const wayLineJodInfoId = inject('wayLineJodInfoId')
const getAchievement = () => {
getJobInfoFiles({ jobInfoId: wayLineJodInfoId.value }).then(res => {
+ for (let i = 0; i < res.data.data.length; i++) {
+ const url = res.data.data[i].url || ''
+ const ext = String(url)?.split('.')?.pop().toLowerCase() || ''
+ const images = ['jpg', 'jpeg', 'png', 'gif', 'webp']
+ const videos = ['mp4', 'webm', 'ogg', 'mov']
+ mediaType.value = images.includes(ext) ? 'image' : videos.includes(ext) ? 'video' : ''
+ }
+
achievementList.value = res.data.data
+ total.value = res.data.data.length
})
}
const getDetails = () => {
getJobDetails({ wayLineJobInfoId: wayLineJodInfoId.value }).then(res => {
detailsData.value = res.data.data
infoList.value.forEach(item => {
- item.value = detailsData.value?.[item.field] || ''
+ if (item.name === '任务时间') {
+ item.value = detailsData.value.begin_time.slice(0, 10) + '-' + detailsData.value.end_time.slice(0, 10)
+ } else if (item.name === '任务频次') {
+ item.value ===undefined ? '' : detailsData.value.rep_rule_type + ' -- ' + detailsData.value.rep_rule_val
+ } else {
+ item.value = detailsData.value?.[item.field] || ''
+ }
})
+ flystatus.value = res.data.data.ai_type_str
})
}
@@ -124,44 +163,93 @@
height: 100%;
.contentLeft {
+ margin-left: 35px;
+ margin-right: 24px;
width: 900px;
overflow: auto;
-
- .infoBox {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 10px; // 列之间的间距
- padding: 10px;
-
- .itemBox {
- background-color: #fff;
- border: 1px solid #ddd;
- border-radius: 4px;
- padding: 15px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
- display: flex;
- align-items: center;
+ .machineTableDetailsTitle {
+ margin-bottom: 16px;
+ background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
+ background-size: 100% 100%;
+ span {
+ display: inline-block;
+ margin-left: 30px;
+ font-size: 16px;
+ color: #ddf0ff;
+ line-height: 20px;
+ text-align: left;
+ margin-bottom: 8px;
}
-
+ }
+ .devicetitle {
+ margin-bottom: 16px;
+ background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: space-between;
+ align-content: center;
+ p {
+ display: inline-block;
+ margin-left: 30px;
+ font-size: 16px;
+ color: #ddf0ff;
+ line-height: 20px;
+ text-align: left;
+ margin-bottom: 8px;
+ span {
+ font-size: 26px;
+ color: #0282ff;
+ font-weight: bold;
+ }
+ }
+ .more {
+ color: #2f9dff;
+ font-size: 14px;
+ padding-top: 5px;
+ cursor: pointer;
+ }
+ }
+ .infoBox {
+ display: flex;
+ justify-content: space-between;
+ .itemBoxLeft {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 10px; // 列之间的间距
+ padding: 10px;
+ font-size: 14px;
+ .itemBox {
+ display: flex;
+ align-items: center;
+ margin-bottom: 24px;
+ }
+ }
.itemTitle {
- font-weight: bold;
- color: #333;
+ color: #fff;
}
.itemValue {
- color: #666;
+ font-weight: bold;
+ color: #fff;
+ }
+ .itemBoxRight {
+ width: 262px;
+ display: flex;
}
}
.imgListBox {
- display: flex;
- flex-wrap: wrap;
- gap: 0 10px;
-
- .imgItem {
- width: 200px;
- height: 200px;
- }
+ // display: flex;
+ // flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 10px;
+ margin-bottom: 49px;
+ // .imgItem {
+ // width: 200px;
+ // height: 200px;
+ // }
}
}
@@ -169,6 +257,7 @@
width: 0;
flex-grow: 1;
background: #19ad8d;
+ margin-right: 17px;
}
}
</style>
--
Gitblit v1.9.3