feat:修改任务列表样式，增加任务完成后自动清除目标区域，更新数据等
This commit is contained in:
wxs
parent
303c6fc541
commit
2eb9d77a18
@ -29,7 +29,7 @@
|
|||||||
<!-- </template>-->
|
<!-- </template>-->
|
||||||
<div class="task-list__content">
|
<div class="task-list__content">
|
||||||
<div v-for="item in taskList.data" :key="item.id" class="task-item">
|
<div v-for="item in taskList.data" :key="item.id" class="task-item">
|
||||||
<div class="left-part">
|
<div class="top-part">
|
||||||
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
|
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
|
||||||
<div class="execute-info" @click="openTaskLineDetail(item)">
|
<div class="execute-info" @click="openTaskLineDetail(item)">
|
||||||
<span
|
<span
|
||||||
@ -41,14 +41,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="task-info">
|
<div class="task-info">
|
||||||
{{ item.statusName }}
|
{{ item.statusName }}
|
||||||
<!-- <i class="el-icon-camera"></i>-->
|
|
||||||
<!-- <span class="task-name">{{ item.name }}</span>-->
|
|
||||||
<!-- <span :class="{ 'task-finish': item.isFinish }">{{-->
|
|
||||||
<!-- item.taskProgressName-->
|
|
||||||
<!-- }}</span>-->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="task-time">{{ item.beginTime }}</div>
|
|
||||||
|
<!-- <div class="task-time">{{ item.beginTime }}</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
<p>无人机名称: 无人机1</p>
|
||||||
|
<p>雷达名称: SAR1</p>
|
||||||
|
<p>开始时间：{{ item.beginTime }}</p>
|
||||||
<div class="right-part">
|
<div class="right-part">
|
||||||
<!-- <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
|
<!-- <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
|
||||||
<!-- <el-tooltip-->
|
<!-- <el-tooltip-->
|
||||||
@ -59,18 +58,6 @@
|
|||||||
<!-- <i class="ri-repeat-line" @click.stop="reRunTask(item)"></i>-->
|
<!-- <i class="ri-repeat-line" @click.stop="reRunTask(item)"></i>-->
|
||||||
|
|
||||||
<!-- </el-tooltip>-->
|
<!-- </el-tooltip>-->
|
||||||
<el-tooltip effect="dark" content="修改名称" placement="right">
|
|
||||||
<i
|
|
||||||
class="el-icon-edit-outline"
|
|
||||||
@click.stop="editTaskName(item)"
|
|
||||||
></i>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="dark" content="删除" placement="right">
|
|
||||||
<i
|
|
||||||
class="el-icon-close delete-task"
|
|
||||||
@click.stop="deleteTask(item)"
|
|
||||||
></i>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -876,7 +876,9 @@ export default {
|
|||||||
if (name === '执行中') {
|
if (name === '执行中') {
|
||||||
return '#6ae965'
|
return '#6ae965'
|
||||||
} else if (name === '已完成') {
|
} else if (name === '已完成') {
|
||||||
return '#336dff'
|
return '#0f8cc7'
|
||||||
|
} else if (name === '未执行') {
|
||||||
|
return '#b2ff38'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getUavList() {
|
getUavList() {
|
||||||
@ -985,6 +987,15 @@ export default {
|
|||||||
let list = []
|
let list = []
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
item.statusName = this.jobStatus[item.status + '']
|
item.statusName = this.jobStatus[item.status + '']
|
||||||
|
console.log(item, 33333333333);
|
||||||
|
let uav = undefined
|
||||||
|
let sar = undefined
|
||||||
|
if (item.uavList.length) {
|
||||||
|
uav = item.uavList[0].uavName
|
||||||
|
if (item.uavList[0].payloadList.length) {
|
||||||
|
sar = item.uavList[0].payloadList[0].payloadName
|
||||||
|
}
|
||||||
|
}
|
||||||
list.push({
|
list.push({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
beginTime: item.beginTime,
|
beginTime: item.beginTime,
|
||||||
@ -994,6 +1005,8 @@ export default {
|
|||||||
name: item.name,
|
name: item.name,
|
||||||
status: item.status,
|
status: item.status,
|
||||||
statusName: item.statusName,
|
statusName: item.statusName,
|
||||||
|
uav,
|
||||||
|
sar
|
||||||
})
|
})
|
||||||
this.removeTaskTarget(item.id)
|
this.removeTaskTarget(item.id)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -26,122 +26,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.task-item {
|
.task-item {
|
||||||
height: 40px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: calc(100% - 5px);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
|
border: 1px solid $--color-border-1;
|
||||||
.left-part {
|
padding: 8px 15px;
|
||||||
padding: 0 8px;
|
|
||||||
background: rgba(51, 51, 51, 0.6);
|
|
||||||
border-radius: 4px;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
border-radius: 6px;
|
||||||
justify-content: space-between;
|
background-color: $--color-black-3-alpha;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.task-progress-bar {
|
&:hover {
|
||||||
position: absolute;
|
background-color: $--color-black-3;
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #43522c;
|
|
||||||
//z-index: -1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.execute-info {
|
>p {
|
||||||
z-index: 1;
|
line-height: 24px;
|
||||||
display: flex;
|
color: $--color-text-2;
|
||||||
justify-content: flex-start;
|
padding-left: 3px;
|
||||||
align-items: center;
|
|
||||||
// width: 150px;
|
|
||||||
|
|
||||||
.execute-type-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 4px;
|
|
||||||
border: 1px solid $--color-text-1;
|
|
||||||
|
|
||||||
>i {
|
|
||||||
color: $--color-text-1;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-0 {
|
|
||||||
border: 1px solid #a45d35;
|
|
||||||
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
||||||
0 0 10px rgba(164, 93, 53, 0.6),
|
|
||||||
0 0 20px rgba(164, 93, 53, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-1 {
|
|
||||||
border: 1px solid #39cf0b;
|
|
||||||
box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
|
|
||||||
0 0 10px rgba(17, 172, 38, 0.6),
|
|
||||||
0 0 20px rgba(17, 172, 38, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-2 {
|
|
||||||
border: 1px solid $--color-text-1;
|
|
||||||
box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
|
|
||||||
0 0 6px rgba(250, 250, 250, 0.6),
|
|
||||||
0 0 14px rgba(250, 250, 250, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-3 {
|
|
||||||
border: 1px solid #a45d35;
|
|
||||||
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
||||||
0 0 10px rgba(164, 93, 53, 0.6),
|
|
||||||
0 0 20px rgba(164, 93, 53, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-4 {
|
|
||||||
border: 1px solid #893654;
|
|
||||||
box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
|
|
||||||
0 0 10px rgba(137, 54, 84, 0.6),
|
|
||||||
0 0 20px rgba(137, 54, 84, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-5 {
|
|
||||||
border: 1px solid #681c1f;
|
|
||||||
box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
|
|
||||||
0 0 10px rgba(104, 28, 31, 0.6),
|
|
||||||
0 0 20px rgba(104, 28, 31, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-execute {
|
|
||||||
color: $--color-text-1;
|
|
||||||
font-size: 14px;
|
|
||||||
width: 85px;
|
|
||||||
margin-left: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-info {
|
.task-info {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 50px;
|
position: absolute;
|
||||||
display: flex;
|
bottom: 0;
|
||||||
justify-content: flex-start;
|
right: 0;
|
||||||
align-items: center;
|
background-color: $--color-black-2;
|
||||||
|
padding: 4px 15px;
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
border-top-left-radius: 6px;
|
||||||
|
|
||||||
>i {
|
>i {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -163,46 +76,9 @@
|
|||||||
color: $--color-green;
|
color: $--color-green;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-time {
|
|
||||||
z-index: 1;
|
|
||||||
color: $--color-text-1;
|
|
||||||
min-width: 140px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-part {
|
|
||||||
width: 60px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
>i {
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-task {
|
|
||||||
color: #ffff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-task {
|
|
||||||
color: $--color-red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//.task-list__large {
|
|
||||||
// height: calc(50vh - 110px);
|
|
||||||
// left: $--icon-mode-larger-card-left;
|
|
||||||
// top: $--icon-mode-larger-card-top;
|
|
||||||
// transition: 0.2s ease-in-out;
|
|
||||||
//}
|
|
||||||
|
|
||||||
.task-form {
|
.task-form {
|
||||||
width: 410px;
|
width: 410px;
|
||||||
height: calc(100vh - 70px);
|
height: calc(100vh - 70px);
|
||||||
@ -213,12 +89,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//.task-form__large {
|
|
||||||
// height: calc(100vh - 110px);
|
|
||||||
// left: $--icon-mode-larger-card-left;
|
|
||||||
// top: $--icon-mode-larger-card-top;
|
|
||||||
// transition: 0.2s ease-in-out;
|
|
||||||
//}
|
|
||||||
.requirement-form {
|
.requirement-form {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
@ -553,3 +423,115 @@
|
|||||||
background-color: #00000052;
|
background-color: #00000052;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-part {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 24px;
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.execute-info {
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
// width: 150px;
|
||||||
|
|
||||||
|
.execute-type-icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 4px;
|
||||||
|
border: 1px solid $--color-text-1;
|
||||||
|
|
||||||
|
>i {
|
||||||
|
color: $--color-text-1;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-0 {
|
||||||
|
border: 1px solid #a45d35;
|
||||||
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
||||||
|
0 0 10px rgba(164, 93, 53, 0.6),
|
||||||
|
0 0 20px rgba(164, 93, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-1 {
|
||||||
|
border: 1px solid #39cf0b;
|
||||||
|
box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
|
||||||
|
0 0 10px rgba(17, 172, 38, 0.6),
|
||||||
|
0 0 20px rgba(17, 172, 38, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-2 {
|
||||||
|
border: 1px solid $--color-text-1;
|
||||||
|
box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
|
||||||
|
0 0 6px rgba(250, 250, 250, 0.6),
|
||||||
|
0 0 14px rgba(250, 250, 250, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-3 {
|
||||||
|
border: 1px solid #a45d35;
|
||||||
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
||||||
|
0 0 10px rgba(164, 93, 53, 0.6),
|
||||||
|
0 0 20px rgba(164, 93, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-4 {
|
||||||
|
border: 1px solid #893654;
|
||||||
|
box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
|
||||||
|
0 0 10px rgba(137, 54, 84, 0.6),
|
||||||
|
0 0 20px rgba(137, 54, 84, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-5 {
|
||||||
|
border: 1px solid #681c1f;
|
||||||
|
box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
|
||||||
|
0 0 10px rgba(104, 28, 31, 0.6),
|
||||||
|
0 0 20px rgba(104, 28, 31, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-execute {
|
||||||
|
color: $--color-text-1;
|
||||||
|
font-size: 14px;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
margin-left: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
width: 60px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
|
||||||
|
>i {
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-task {
|
||||||
|
color: #ffff00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-task {
|
||||||
|
color: $--color-red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -30,8 +30,9 @@
|
|||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="task-item"
|
class="task-item"
|
||||||
>
|
>
|
||||||
<div class="left-part">
|
<div class="top-part">
|
||||||
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
|
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
|
||||||
|
<div class="top-part__left">
|
||||||
<div class="execute-info" @click="openTaskLineDetail(item)">
|
<div class="execute-info" @click="openTaskLineDetail(item)">
|
||||||
<span
|
<span
|
||||||
class="execute-type-icon"
|
class="execute-type-icon"
|
||||||
@ -40,20 +41,8 @@
|
|||||||
></span>
|
></span>
|
||||||
<span class="task-execute">{{ item.name }}</span>
|
<span class="task-execute">{{ item.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="task-info"
|
|
||||||
:style="{ color: dealStatusColor(item.statusName) }"
|
|
||||||
>
|
|
||||||
{{ item.statusName }}
|
|
||||||
<!-- <i class="el-icon-camera"></i>-->
|
|
||||||
<!-- <span class="task-name">{{ item.name }}</span>-->
|
|
||||||
<!-- <span :class="{ 'task-finish': item.isFinish }">{{-->
|
|
||||||
<!-- item.taskProgressName-->
|
|
||||||
<!-- }}</span>-->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="task-time">{{ item.beginTime }}</div>
|
<div class="top-part__right">
|
||||||
</div>
|
|
||||||
<div class="right-part">
|
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
effect="dark"
|
effect="dark"
|
||||||
:content="item.check ? '隐藏' : '显示'"
|
:content="item.check ? '隐藏' : '显示'"
|
||||||
@ -100,21 +89,16 @@
|
|||||||
<el-dropdown-item command="remove">删除</el-dropdown-item>
|
<el-dropdown-item command="remove">删除</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<!-- <el-tooltip effect="dark" content="修改名称" placement="top">
|
</div>
|
||||||
<i
|
</div>
|
||||||
class="el-icon-edit-outline"
|
<p>无人机名称: {{ item.uav }}</p>
|
||||||
@click.stop="editTaskName(item)"
|
<p>雷达名称: {{ item.sar }}</p>
|
||||||
></i>
|
<p>开始时间：{{ item.beginTime }}</p>
|
||||||
</el-tooltip>
|
<div
|
||||||
<el-tooltip effect="dark" content="复制" placement="top">
|
class="task-info"
|
||||||
<i class="ri-file-copy-2-line" @click.stop="copyTask(item)"></i>
|
:style="{ color: dealStatusColor(item.statusName) }"
|
||||||
</el-tooltip>
|
>
|
||||||
<el-tooltip effect="dark" content="删除" placement="top">
|
{{ item.statusName }}
|
||||||
<i
|
|
||||||
class="el-icon-close delete-task"
|
|
||||||
@click.stop="deleteTask(item)"
|
|
||||||
></i>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1085,6 +1085,7 @@ export default {
|
|||||||
console.log('任务列表', res.data.data)
|
console.log('任务列表', res.data.data)
|
||||||
let data = res.data.data
|
let data = res.data.data
|
||||||
let list = []
|
let list = []
|
||||||
|
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
// item.check = item.status === 1 || item.status === 3
|
// item.check = item.status === 1 || item.status === 3
|
||||||
item.check = false
|
item.check = false
|
||||||
@ -1096,6 +1097,15 @@ export default {
|
|||||||
}
|
}
|
||||||
child.jobName = item.name
|
child.jobName = item.name
|
||||||
})
|
})
|
||||||
|
|
||||||
|
let uav = undefined
|
||||||
|
let sar = undefined
|
||||||
|
if (item.uavList.length) {
|
||||||
|
uav = item.uavList[0].uavName
|
||||||
|
if (item.uavList[0].payloadList.length) {
|
||||||
|
sar = item.uavList[0].payloadList[0].payloadName
|
||||||
|
}
|
||||||
|
}
|
||||||
list.push({
|
list.push({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
beginTime: item.beginTime,
|
beginTime: item.beginTime,
|
||||||
@ -1105,6 +1115,8 @@ export default {
|
|||||||
name: item.name,
|
name: item.name,
|
||||||
status: item.status,
|
status: item.status,
|
||||||
statusName: item.statusName,
|
statusName: item.statusName,
|
||||||
|
uav,
|
||||||
|
sar
|
||||||
})
|
})
|
||||||
// TODO
|
// TODO
|
||||||
// item.pointList = [item.pointList]
|
// item.pointList = [item.pointList]
|
||||||
@ -2994,9 +3006,12 @@ export default {
|
|||||||
// 从执行中变为执行完毕
|
// 从执行中变为执行完毕
|
||||||
if (this.taskList.data[findIndex].status === 1 && data.jobStatus === 2) {
|
if (this.taskList.data[findIndex].status === 1 && data.jobStatus === 2) {
|
||||||
// 移除任务相关信息
|
// 移除任务相关信息
|
||||||
console.log('任务变更', this.jobStatus, this.jobStatus[data.jobStatus + ''])
|
// console.log('任务变更', this.jobStatus, this.jobStatus[data.jobStatus + ''])
|
||||||
this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
|
// this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
|
||||||
taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
|
// taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
|
||||||
|
taskListResource.splice(findIndex, 1)
|
||||||
|
this.getTaskList()
|
||||||
|
this.removeTaskTarget(data.jobId)
|
||||||
}
|
}
|
||||||
if (data.jobStatus === 1 && this.detailUav.id === data.jobId) {
|
if (data.jobStatus === 1 && this.detailUav.id === data.jobId) {
|
||||||
this.updateUavInfo(data.sarStatus)
|
this.updateUavInfo(data.sarStatus)
|
||||||
|
|||||||
@ -48,122 +48,34 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.task-item {
|
.task-item {
|
||||||
height: 40px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: calc(100% - 5px);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
|
border: 1px solid $--color-border-1;
|
||||||
.left-part {
|
padding: 8px 15px;
|
||||||
padding: 0 8px;
|
|
||||||
background: rgba(51, 51, 51, 0.6);
|
|
||||||
border-radius: 4px;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
border-radius: 6px;
|
||||||
justify-content: space-between;
|
background-color: $--color-black-3-alpha;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.task-progress-bar {
|
&:hover {
|
||||||
position: absolute;
|
background-color: $--color-black-3;
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #43522c;
|
|
||||||
//z-index: -1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.execute-info {
|
>p {
|
||||||
z-index: 1;
|
color: $--color-text-2;
|
||||||
display: flex;
|
line-height: 24px;
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
// width: 150px;
|
|
||||||
|
|
||||||
.execute-type-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 4px;
|
|
||||||
border: 1px solid $--color-text-1;
|
|
||||||
|
|
||||||
>i {
|
|
||||||
color: $--color-text-1;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-0 {
|
|
||||||
border: 1px solid #a45d35;
|
|
||||||
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
||||||
0 0 10px rgba(164, 93, 53, 0.6),
|
|
||||||
0 0 20px rgba(164, 93, 53, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-1 {
|
|
||||||
border: 1px solid #39cf0b;
|
|
||||||
box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
|
|
||||||
0 0 10px rgba(17, 172, 38, 0.6),
|
|
||||||
0 0 20px rgba(17, 172, 38, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-2 {
|
|
||||||
border: 1px solid $--color-text-1;
|
|
||||||
box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
|
|
||||||
0 0 6px rgba(250, 250, 250, 0.6),
|
|
||||||
0 0 14px rgba(250, 250, 250, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-3 {
|
|
||||||
border: 1px solid #a45d35;
|
|
||||||
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
|
||||||
0 0 10px rgba(164, 93, 53, 0.6),
|
|
||||||
0 0 20px rgba(164, 93, 53, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-4 {
|
|
||||||
border: 1px solid #893654;
|
|
||||||
box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
|
|
||||||
0 0 10px rgba(137, 54, 84, 0.6),
|
|
||||||
0 0 20px rgba(137, 54, 84, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.execute-state-5 {
|
|
||||||
border: 1px solid #681c1f;
|
|
||||||
box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
|
|
||||||
0 0 10px rgba(104, 28, 31, 0.6),
|
|
||||||
0 0 20px rgba(104, 28, 31, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-execute {
|
|
||||||
color: $--color-text-1;
|
|
||||||
font-size: 14px;
|
|
||||||
width: 90px;
|
|
||||||
margin-left: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-info {
|
.task-info {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 50px;
|
position: absolute;
|
||||||
display: flex;
|
bottom: 0;
|
||||||
justify-content: flex-start;
|
right: 0;
|
||||||
align-items: center;
|
background-color: $--color-black-2;
|
||||||
|
padding: 4px 15px;
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
border-top-left-radius: 6px;
|
||||||
|
|
||||||
>i {
|
>i {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -185,36 +97,6 @@
|
|||||||
color: $--color-green;
|
color: $--color-green;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-time {
|
|
||||||
z-index: 1;
|
|
||||||
color: $--color-text-1;
|
|
||||||
min-width: 140px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-part {
|
|
||||||
width: 40px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 8px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
>i {
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-task {
|
|
||||||
color: #ffff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-task {
|
|
||||||
color: $--color-red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -408,9 +290,9 @@
|
|||||||
.detail-uav-wrap {
|
.detail-uav-wrap {
|
||||||
width: 430px;
|
width: 430px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 5px;
|
top: 60px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
height: calc(100vh - 60px);
|
height: calc(100vh - 270px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-info {
|
.detail-info {
|
||||||
@ -1086,35 +968,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-info {
|
|
||||||
z-index: 1;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
width: 50px;
|
|
||||||
|
|
||||||
>i {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #07e5e5;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
>span {
|
|
||||||
color: $--color-orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-name {
|
|
||||||
color: $--color-text-1;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-finish {
|
|
||||||
color: $--color-green;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-time {
|
.task-time {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: $--color-text-1;
|
color: $--color-text-1;
|
||||||
@ -1188,7 +1041,7 @@
|
|||||||
//bottom: 5px;
|
//bottom: 5px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
//right: 510px;
|
//right: 510px;
|
||||||
height: calc(100vh - 70px);
|
height: calc(100vh - 270px);
|
||||||
//height: calc(100vh - 620px);
|
//height: calc(100vh - 620px);
|
||||||
transition: 0.2s ease-in-out;
|
transition: 0.2s ease-in-out;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -1259,66 +1112,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.target-task-item {
|
|
||||||
height: 40px;
|
|
||||||
margin: 8px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 8px;
|
|
||||||
background: #333333;
|
|
||||||
border-radius: 4px;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.task-progress-bar {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #43522c;
|
|
||||||
//z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-info {
|
|
||||||
z-index: 1;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
width: 50px;
|
|
||||||
|
|
||||||
>i {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #07e5e5;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
>span {
|
|
||||||
color: $--color-orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-name {
|
|
||||||
color: $--color-text-1;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-finish {
|
|
||||||
color: $--color-green;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-time {
|
|
||||||
z-index: 1;
|
|
||||||
color: $--color-text-1;
|
|
||||||
min-width: 140px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uav-span-wrap {
|
.uav-span-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -1415,3 +1208,114 @@
|
|||||||
::v-deep .el-collapse {
|
::v-deep .el-collapse {
|
||||||
border-top: unset;
|
border-top: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-part {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 24px;
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.execute-info {
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.execute-type-icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 4px;
|
||||||
|
border: 1px solid $--color-text-1;
|
||||||
|
|
||||||
|
>i {
|
||||||
|
color: $--color-text-1;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-0 {
|
||||||
|
border: 1px solid #a45d35;
|
||||||
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
||||||
|
0 0 10px rgba(164, 93, 53, 0.6),
|
||||||
|
0 0 20px rgba(164, 93, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-1 {
|
||||||
|
border: 1px solid #39cf0b;
|
||||||
|
box-shadow: 0 0 5px rgba(17, 172, 38, 0.8),
|
||||||
|
0 0 10px rgba(17, 172, 38, 0.6),
|
||||||
|
0 0 20px rgba(17, 172, 38, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-2 {
|
||||||
|
border: 1px solid $--color-text-1;
|
||||||
|
box-shadow: 0 0 2px rgba(250, 250, 250, 0.8),
|
||||||
|
0 0 6px rgba(250, 250, 250, 0.6),
|
||||||
|
0 0 14px rgba(250, 250, 250, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-3 {
|
||||||
|
border: 1px solid #a45d35;
|
||||||
|
box-shadow: 0 0 5px rgba(164, 93, 53, 0.8),
|
||||||
|
0 0 10px rgba(164, 93, 53, 0.6),
|
||||||
|
0 0 20px rgba(164, 93, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-4 {
|
||||||
|
border: 1px solid #893654;
|
||||||
|
box-shadow: 0 0 5px rgba(137, 54, 84, 0.8),
|
||||||
|
0 0 10px rgba(137, 54, 84, 0.6),
|
||||||
|
0 0 20px rgba(137, 54, 84, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-state-5 {
|
||||||
|
border: 1px solid #681c1f;
|
||||||
|
box-shadow: 0 0 5px rgba(104, 28, 31, 0.8),
|
||||||
|
0 0 10px rgba(104, 28, 31, 0.6),
|
||||||
|
0 0 20px rgba(104, 28, 31, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-execute {
|
||||||
|
color: $--color-text-1;
|
||||||
|
font-size: 14px;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
margin-left: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
width: 40px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
|
||||||
|
>i {
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-task {
|
||||||
|
color: #ffff00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-task {
|
||||||
|
color: $--color-red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -75,8 +75,9 @@
|
|||||||
class="task-item"
|
class="task-item"
|
||||||
@click="openSarStatusDetail(item)"
|
@click="openSarStatusDetail(item)"
|
||||||
>
|
>
|
||||||
<div class="left-part">
|
<div class="top-part">
|
||||||
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
|
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
|
||||||
|
<div class="top-part__left">
|
||||||
<div class="execute-info">
|
<div class="execute-info">
|
||||||
<span
|
<span
|
||||||
class="execute-type-icon"
|
class="execute-type-icon"
|
||||||
@ -85,15 +86,8 @@
|
|||||||
></span>
|
></span>
|
||||||
<span class="task-execute">{{ item.name }}</span>
|
<span class="task-execute">{{ item.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="task-info"
|
|
||||||
:style="{ color: dealStatusColor(item.statusName) }"
|
|
||||||
>
|
|
||||||
{{ item.statusName }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="task-time">{{ item.beginTime }}</div>
|
<div class="top-part__right">
|
||||||
</div>
|
|
||||||
<div class="right-part">
|
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
effect="dark"
|
effect="dark"
|
||||||
:content="item.check ? '隐藏' : '显示'"
|
:content="item.check ? '隐藏' : '显示'"
|
||||||
@ -104,17 +98,6 @@
|
|||||||
@click.stop="toggleTaskSceneShow(item, index)"
|
@click.stop="toggleTaskSceneShow(item, index)"
|
||||||
></i>
|
></i>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<!-- <el-tooltip
|
|
||||||
v-if="item.status === 0"
|
|
||||||
effect="dark"
|
|
||||||
content="执行"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="ri-arrow-up-circle-line"
|
|
||||||
@click.stop="makeTaskUavFly(item, index)"
|
|
||||||
></i>
|
|
||||||
</el-tooltip> -->
|
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
effect="dark"
|
effect="dark"
|
||||||
content="结束任务"
|
content="结束任务"
|
||||||
@ -126,17 +109,16 @@
|
|||||||
@click.stop="stopTask(item, index)"
|
@click.stop="stopTask(item, index)"
|
||||||
></i>
|
></i>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<!-- <el-tooltip
|
</div>
|
||||||
effect="dark"
|
</div>
|
||||||
content="重新执行"
|
<p>无人机名称: {{ item.uav }}</p>
|
||||||
placement="top"
|
<p>雷达名称: {{ item.sar }}</p>
|
||||||
v-if="item.status === 2"
|
<p>开始时间：{{ item.beginTime }}</p>
|
||||||
|
<div
|
||||||
|
class="task-info"
|
||||||
|
:style="{ color: dealStatusColor(item.statusName) }"
|
||||||
>
|
>
|
||||||
<i
|
{{ item.statusName }}
|
||||||
class="ri-restart-line"
|
|
||||||
@click.stop="reRunTask(item, index)"
|
|
||||||
></i>
|
|
||||||
</el-tooltip> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -292,50 +274,6 @@
|
|||||||
<i class="el-icon-info device-lock" @click="showUavMore"></i>
|
<i class="el-icon-info device-lock" @click="showUavMore"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="target-task-list">-->
|
|
||||||
<!-- <div class="target-task-item" v-for="item in detailInfo.taskList" :key="item.id">-->
|
|
||||||
<!-- <div class="execute-info">-->
|
|
||||||
<!-- <span class="execute-type-icon" :class="'execute-state-' + item.status"><i class="ri-dv-line"></i></span>-->
|
|
||||||
<!-- <span class="task-execute">{{ item.name }}</span>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="task-time">{{item.beginTime}}</div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<div class="picture-list">
|
|
||||||
<div>回传图像：</div>
|
|
||||||
<div
|
|
||||||
v-for="item in detailInfo.pictureList"
|
|
||||||
:key="item.createTime"
|
|
||||||
class="picture-list-item"
|
|
||||||
>
|
|
||||||
<div class="picture-item-image">
|
|
||||||
<el-image
|
|
||||||
style="width: 40px; height: 40px"
|
|
||||||
:src="item.url"
|
|
||||||
:preview-src-list="[item.url]"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
<div class="picture-item-info">
|
|
||||||
<div>
|
|
||||||
拍摄任务：{{ item.taskName }} | 拍摄载荷：{{
|
|
||||||
item.loaderName
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div>拍摄时间：{{ item.createTime }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="picture-command">
|
|
||||||
<i
|
|
||||||
class="iconfont icon-dt-icon-dingwei"
|
|
||||||
@click="lockHistoryPicture(item)"
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
class="iconfont icon-quanjushijiao-copy"
|
|
||||||
@click="toggleHistoryPicture(item)"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</dt-card>
|
</dt-card>
|
||||||
</right-slide>
|
</right-slide>
|
||||||
|
|||||||
@ -1524,7 +1524,7 @@ export default {
|
|||||||
},
|
},
|
||||||
//#endregion
|
//#endregion
|
||||||
sarChange(val) {
|
sarChange(val) {
|
||||||
this.moveInfoBar = val
|
// this.moveInfoBar = val
|
||||||
},
|
},
|
||||||
|
|
||||||
//#region ais船
|
//#region ais船
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user