feat:修改任务列表样式，增加任务完成后自动清除目标区域，更新数据等
This commit is contained in:
wxs
parent
303c6fc541
commit
2eb9d77a18
@ -29,7 +29,7 @@
|
||||
<!-- </template>-->
|
||||
<div class="task-list__content">
|
||||
<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="execute-info" @click="openTaskLineDetail(item)">
|
||||
<span
|
||||
@ -41,14 +41,13 @@
|
||||
</div>
|
||||
<div class="task-info">
|
||||
{{ 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 class="task-time">{{ item.beginTime }}</div>
|
||||
|
||||
<!-- <div class="task-time">{{ item.beginTime }}</div> -->
|
||||
</div>
|
||||
<p>无人机名称: 无人机1</p>
|
||||
<p>雷达名称: SAR1</p>
|
||||
<p>开始时间：{{ item.beginTime }}</p>
|
||||
<div class="right-part">
|
||||
<!-- <i class="el-icon-edit-outline edit-task" @click.stop="editTask(item)"></i>-->
|
||||
<!-- <el-tooltip-->
|
||||
@ -59,18 +58,6 @@
|
||||
<!-- <i class="ri-repeat-line" @click.stop="reRunTask(item)"></i>-->
|
||||
|
||||
<!-- </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>
|
||||
|
||||
@ -876,7 +876,9 @@ export default {
|
||||
if (name === '执行中') {
|
||||
return '#6ae965'
|
||||
} else if (name === '已完成') {
|
||||
return '#336dff'
|
||||
return '#0f8cc7'
|
||||
} else if (name === '未执行') {
|
||||
return '#b2ff38'
|
||||
}
|
||||
},
|
||||
getUavList() {
|
||||
@ -985,6 +987,15 @@ export default {
|
||||
let list = []
|
||||
data.forEach(item => {
|
||||
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({
|
||||
id: item.id,
|
||||
beginTime: item.beginTime,
|
||||
@ -994,6 +1005,8 @@ export default {
|
||||
name: item.name,
|
||||
status: item.status,
|
||||
statusName: item.statusName,
|
||||
uav,
|
||||
sar
|
||||
})
|
||||
this.removeTaskTarget(item.id)
|
||||
})
|
||||
|
||||
@ -26,183 +26,59 @@
|
||||
}
|
||||
|
||||
.task-item {
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
width: calc(100% - 5px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 8px 0;
|
||||
border: 1px solid $--color-border-1;
|
||||
padding: 8px 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
background-color: $--color-black-3-alpha;
|
||||
|
||||
.left-part {
|
||||
padding: 0 8px;
|
||||
background: rgba(51, 51, 51, 0.6);
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.task-progress-bar {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 4px;
|
||||
background: #43522c;
|
||||
//z-index: -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: 85px;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.task-info {
|
||||
z-index: 1;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
>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;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $--color-black-3;
|
||||
}
|
||||
|
||||
.right-part {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
>p {
|
||||
line-height: 24px;
|
||||
color: $--color-text-2;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: $--color-black-2;
|
||||
padding: 4px 15px;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
|
||||
>i {
|
||||
font-size: 16px;
|
||||
color: #07e5e5;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
>span {
|
||||
color: $--color-orange;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
color: $--color-text-1;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin: 2px 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.edit-task {
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
.delete-task {
|
||||
color: $--color-red;
|
||||
.task-finish {
|
||||
color: $--color-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//.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 {
|
||||
width: 410px;
|
||||
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 {
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
@ -553,3 +423,115 @@
|
||||
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,91 +30,75 @@
|
||||
: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="execute-info" @click="openTaskLineDetail(item)">
|
||||
<span
|
||||
class="execute-type-icon"
|
||||
:class="'execute-state-' + item.status"
|
||||
><i class="ri-playstation-line"></i
|
||||
></span>
|
||||
<span class="task-execute">{{ item.name }}</span>
|
||||
<div class="top-part__left">
|
||||
<div class="execute-info" @click="openTaskLineDetail(item)">
|
||||
<span
|
||||
class="execute-type-icon"
|
||||
:class="'execute-state-' + item.status"
|
||||
><i class="ri-playstation-line"></i
|
||||
></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 class="top-part__right">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="item.check ? '隐藏' : '显示'"
|
||||
placement="top"
|
||||
>
|
||||
<i
|
||||
:class="item.check ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click.stop="toggleTaskSceneShow(item, index)"
|
||||
></i>
|
||||
</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
|
||||
effect="dark"
|
||||
content="重新执行"
|
||||
placement="top"
|
||||
v-if="item.status === 2"
|
||||
>
|
||||
<i
|
||||
class="ri-restart-line"
|
||||
@click.stop="makeTaskUavFly(item, index)"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<el-dropdown
|
||||
@command="handleCommand($event, item)"
|
||||
placement="bottom"
|
||||
size="small"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<i class="ri-more-fill"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="edit">修改名称</el-dropdown-item>
|
||||
<el-dropdown-item command="copy">复制</el-dropdown-item>
|
||||
<el-dropdown-item command="remove">删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="task-time">{{ item.beginTime }}</div>
|
||||
</div>
|
||||
<div class="right-part">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="item.check ? '隐藏' : '显示'"
|
||||
placement="top"
|
||||
>
|
||||
<i
|
||||
:class="item.check ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click.stop="toggleTaskSceneShow(item, index)"
|
||||
></i>
|
||||
</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
|
||||
effect="dark"
|
||||
content="重新执行"
|
||||
placement="top"
|
||||
v-if="item.status === 2"
|
||||
>
|
||||
<i
|
||||
class="ri-restart-line"
|
||||
@click.stop="makeTaskUavFly(item, index)"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<el-dropdown
|
||||
@command="handleCommand($event, item)"
|
||||
placement="bottom"
|
||||
size="small"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<i class="ri-more-fill"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="edit">修改名称</el-dropdown-item>
|
||||
<el-dropdown-item command="copy">复制</el-dropdown-item>
|
||||
<el-dropdown-item command="remove">删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<!-- <el-tooltip effect="dark" content="修改名称" placement="top">
|
||||
<i
|
||||
class="el-icon-edit-outline"
|
||||
@click.stop="editTaskName(item)"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="复制" placement="top">
|
||||
<i class="ri-file-copy-2-line" @click.stop="copyTask(item)"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="删除" placement="top">
|
||||
<i
|
||||
class="el-icon-close delete-task"
|
||||
@click.stop="deleteTask(item)"
|
||||
></i>
|
||||
</el-tooltip> -->
|
||||
<p>无人机名称: {{ item.uav }}</p>
|
||||
<p>雷达名称: {{ item.sar }}</p>
|
||||
<p>开始时间：{{ item.beginTime }}</p>
|
||||
<div
|
||||
class="task-info"
|
||||
:style="{ color: dealStatusColor(item.statusName) }"
|
||||
>
|
||||
{{ item.statusName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1085,6 +1085,7 @@ export default {
|
||||
console.log('任务列表', res.data.data)
|
||||
let data = res.data.data
|
||||
let list = []
|
||||
|
||||
data.forEach(item => {
|
||||
// item.check = item.status === 1 || item.status === 3
|
||||
item.check = false
|
||||
@ -1096,6 +1097,15 @@ export default {
|
||||
}
|
||||
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({
|
||||
id: item.id,
|
||||
beginTime: item.beginTime,
|
||||
@ -1105,6 +1115,8 @@ export default {
|
||||
name: item.name,
|
||||
status: item.status,
|
||||
statusName: item.statusName,
|
||||
uav,
|
||||
sar
|
||||
})
|
||||
// TODO
|
||||
// item.pointList = [item.pointList]
|
||||
@ -2994,9 +3006,12 @@ export default {
|
||||
// 从执行中变为执行完毕
|
||||
if (this.taskList.data[findIndex].status === 1 && data.jobStatus === 2) {
|
||||
// 移除任务相关信息
|
||||
console.log('任务变更', this.jobStatus, this.jobStatus[data.jobStatus + ''])
|
||||
this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
|
||||
taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
|
||||
// console.log('任务变更', this.jobStatus, this.jobStatus[data.jobStatus + ''])
|
||||
// this.taskList.data[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) {
|
||||
this.updateUavInfo(data.sarStatus)
|
||||
|
||||
@ -48,171 +48,53 @@
|
||||
}
|
||||
|
||||
.task-item {
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
width: calc(100% - 5px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 8px 0;
|
||||
border: 1px solid $--color-border-1;
|
||||
padding: 8px 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
background-color: $--color-black-3-alpha;
|
||||
|
||||
.left-part {
|
||||
padding: 0 8px;
|
||||
background: rgba(51, 51, 51, 0.6);
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.task-progress-bar {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 4px;
|
||||
background: #43522c;
|
||||
//z-index: -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: 90px;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.task-info {
|
||||
z-index: 1;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
>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;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $--color-black-3;
|
||||
}
|
||||
|
||||
.right-part {
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
>p {
|
||||
color: $--color-text-2;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: $--color-black-2;
|
||||
padding: 4px 15px;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
|
||||
>i {
|
||||
font-size: 16px;
|
||||
color: #07e5e5;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
>span {
|
||||
color: $--color-orange;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
color: $--color-text-1;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin: 2px 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.edit-task {
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
.delete-task {
|
||||
color: $--color-red;
|
||||
.task-finish {
|
||||
color: $--color-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -408,9 +290,9 @@
|
||||
.detail-uav-wrap {
|
||||
width: 430px;
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
height: calc(100vh - 60px);
|
||||
height: calc(100vh - 270px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
z-index: 1;
|
||||
color: $--color-text-1;
|
||||
@ -1188,7 +1041,7 @@
|
||||
//bottom: 5px;
|
||||
right: 10px;
|
||||
//right: 510px;
|
||||
height: calc(100vh - 70px);
|
||||
height: calc(100vh - 270px);
|
||||
//height: calc(100vh - 620px);
|
||||
transition: 0.2s ease-in-out;
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -1415,3 +1208,114 @@
|
||||
::v-deep .el-collapse {
|
||||
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,68 +75,50 @@
|
||||
class="task-item"
|
||||
@click="openSarStatusDetail(item)"
|
||||
>
|
||||
<div class="left-part">
|
||||
<div class="top-part">
|
||||
<!-- <div class="task-progress-bar" :style="'width: ' + item.uavCompletion +'%;'"></div>-->
|
||||
<div class="execute-info">
|
||||
<span
|
||||
class="execute-type-icon"
|
||||
:class="'execute-state-' + item.status"
|
||||
><i class="ri-playstation-line"></i
|
||||
></span>
|
||||
<span class="task-execute">{{ item.name }}</span>
|
||||
<div class="top-part__left">
|
||||
<div class="execute-info">
|
||||
<span
|
||||
class="execute-type-icon"
|
||||
:class="'execute-state-' + item.status"
|
||||
><i class="ri-playstation-line"></i
|
||||
></span>
|
||||
<span class="task-execute">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="task-info"
|
||||
:style="{ color: dealStatusColor(item.statusName) }"
|
||||
>
|
||||
{{ item.statusName }}
|
||||
<div class="top-part__right">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="item.check ? '隐藏' : '显示'"
|
||||
placement="top"
|
||||
>
|
||||
<i
|
||||
:class="item.check ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click.stop="toggleTaskSceneShow(item, index)"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
content="结束任务"
|
||||
placement="top"
|
||||
v-if="item.status === 1"
|
||||
>
|
||||
<i
|
||||
class="ri-stop-circle-line"
|
||||
@click.stop="stopTask(item, index)"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="task-time">{{ item.beginTime }}</div>
|
||||
</div>
|
||||
<div class="right-part">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="item.check ? '隐藏' : '显示'"
|
||||
placement="top"
|
||||
>
|
||||
<i
|
||||
:class="item.check ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click.stop="toggleTaskSceneShow(item, index)"
|
||||
></i>
|
||||
</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
|
||||
effect="dark"
|
||||
content="结束任务"
|
||||
placement="top"
|
||||
v-if="item.status === 1"
|
||||
>
|
||||
<i
|
||||
class="ri-stop-circle-line"
|
||||
@click.stop="stopTask(item, index)"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip
|
||||
effect="dark"
|
||||
content="重新执行"
|
||||
placement="top"
|
||||
v-if="item.status === 2"
|
||||
>
|
||||
<i
|
||||
class="ri-restart-line"
|
||||
@click.stop="reRunTask(item, index)"
|
||||
></i>
|
||||
</el-tooltip> -->
|
||||
<p>无人机名称: {{ item.uav }}</p>
|
||||
<p>雷达名称: {{ item.sar }}</p>
|
||||
<p>开始时间：{{ item.beginTime }}</p>
|
||||
<div
|
||||
class="task-info"
|
||||
:style="{ color: dealStatusColor(item.statusName) }"
|
||||
>
|
||||
{{ item.statusName }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -292,50 +274,6 @@
|
||||
<i class="el-icon-info device-lock" @click="showUavMore"></i>
|
||||
</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>
|
||||
</dt-card>
|
||||
</right-slide>
|
||||
@ -410,41 +348,41 @@
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<!-- <el-collapse-item title="回传图像" name="5">
|
||||
<div class="back-image">
|
||||
<div
|
||||
v-for="item in detailInfo.pictureList"
|
||||
:key="item.time"
|
||||
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 class="back-image">
|
||||
<div
|
||||
v-for="item in detailInfo.pictureList"
|
||||
:key="item.time"
|
||||
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.time }}</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>拍摄时间：{{ item.time }}</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>
|
||||
</el-collapse-item> -->
|
||||
</el-collapse-item> -->
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1524,7 +1524,7 @@ export default {
|
||||
},
|
||||
//#endregion
|
||||
sarChange(val) {
|
||||
this.moveInfoBar = val
|
||||
// this.moveInfoBar = val
|
||||
},
|
||||
|
||||
//#region ais船
|
||||
|
||||
Loading…
Reference in New Issue
Block a user