diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/task-list/index.vue b/frontend/Skyeye-sys-ui/src/views/home/components/task-list/index.vue index e9e0783..11637c1 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/components/task-list/index.vue +++ b/frontend/Skyeye-sys-ui/src/views/home/components/task-list/index.vue @@ -29,7 +29,7 @@
-
+
{{ item.statusName }} - - - - -
-
{{ item.beginTime }}
+ +
+

无人机名称: 无人机1

+

雷达名称: SAR1

+

开始时间：{{ item.beginTime }}

@@ -59,18 +58,6 @@ - - - - - -
diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.js b/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.js index f1ec75e..306ed2a 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.js +++ b/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.js @@ -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) }) diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.scss b/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.scss index 6fbbffd..e0542dc 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.scss +++ b/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.scss @@ -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; + } + } +} diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.vue b/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.vue index e29f288..92d5349 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.vue +++ b/frontend/Skyeye-sys-ui/src/views/home/components/task-manage/index.vue @@ -30,91 +30,75 @@ :key="item.id" class="task-item" > -
+
-
- - {{ item.name }} +
+
+ + {{ item.name }} +
-
- {{ item.statusName }} - - - - - +
+ + + + + + + + + + + + + + + 修改名称 + 复制 + 删除 + +
-
{{ item.beginTime }}
-
- - - - - - - - - - - - - - - 修改名称 - 复制 - 删除 - - - +

无人机名称: {{ item.uav }}

+

雷达名称: {{ item.sar }}

+

开始时间：{{ item.beginTime }}

+
+ {{ item.statusName }}
diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js index 25401b3..de79438 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js +++ b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js @@ -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) diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss index 474342a..d2a5f8b 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss +++ b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.scss @@ -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; + } + } +} diff --git a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue index 6c0669e..d081441 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue +++ b/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.vue @@ -75,68 +75,50 @@ class="task-item" @click="openSarStatusDetail(item)" > -
+
-
- - {{ item.name }} +
+
+ + {{ item.name }} +
-
- {{ item.statusName }} +
+ + + + + +
-
{{ item.beginTime }}
-
- - - - - - - - +

无人机名称: {{ item.uav }}

+

雷达名称: {{ item.sar }}

+

开始时间：{{ item.beginTime }}

+
+ {{ item.statusName }}
@@ -292,50 +274,6 @@
- - - - - - - - - -
-
回传图像：
-
-
- - -
-
-
- 拍摄任务：{{ item.taskName }} | 拍摄载荷：{{ - item.loaderName - }} -
-
拍摄时间：{{ item.createTime }}
-
-
- - -
-
-
@@ -410,41 +348,41 @@
+ -->
diff --git a/frontend/Skyeye-sys-ui/src/views/home/index.js b/frontend/Skyeye-sys-ui/src/views/home/index.js index 6ee06bc..c5c9668 100644 --- a/frontend/Skyeye-sys-ui/src/views/home/index.js +++ b/frontend/Skyeye-sys-ui/src/views/home/index.js @@ -1524,7 +1524,7 @@ export default { }, //#endregion sarChange(val) { - this.moveInfoBar = val + // this.moveInfoBar = val }, //#region ais船