From aef47a5501223c8d4c0bc6412a9a3d971e664225 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sat, 12 Apr 2025 09:38:45 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue | 183 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 148 insertions(+), 35 deletions(-)
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue
index 7f18489..70035eb 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue
@@ -1,85 +1,198 @@
<!-- 机巢列表详情 -->
<template>
<el-dialog
- modal-class="machineTableDetails"
+ class="machineTableDetails"
v-model="isShowDetails"
- title="机巢详情"
:width="pxToRem(1500)"
:close-on-click-modal="false"
:destroy-on-close="true"
>
- <el-divider content-position="left">详情</el-divider>
- <div class="infoBox">
- <div class="itemBox" v-for="item in infoList">
- <div class="itemTitle">{{ item.name }}:</div>
- <div class="itemValue">{{ item.value }}</div>
+ <template #header="{ titleId, titleClass }">
+ <div class="my-header">
+ <img src="/src/assets/images/home/homeLeft/inspection-union.png" alt="" />
+ <span :id="titleId" :class="titleClass">机巢详情</span>
+ </div>
+ </template>
+ <div class="machineTableDetailsblock">
+ <div class="machineTableDetailsTitle"><span>详情</span></div>
+ <div class="infoBox">
+ <div class="itemBox" v-for="(item, index) in infoList" :key="index">
+ <div class="itemTitle">{{ item.name }}:</div>
+ <div
+ :class="{
+ active: item.value === 'WORKING',
+ freetime: item.value === 'LEISURE',
+ offine: item.value === 'OFFLINE',
+ }"
+ v-if="item.name == '机巢状态'"
+ >
+ {{ item.value === 'OFFLINE' ? '离线中' : item.value === 'WORKING' ? '作业中' : '空闲中' }}
+ </div>
+ <div class="itemValue" v-else>{{ item.value }}</div>
+ </div>
</div>
</div>
<DeviceJob v-if="isShowDetails" />
<DeviceEvent v-if="isShowDetails" />
</el-dialog>
+
</template>
<script setup>
import DeviceEvent from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue'
import DeviceJob from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue'
-import { pxToRem } from '@/utils/rem';
+import { pxToRem } from '@/utils/rem'
import { useStore } from 'vuex'
const isShowDetails = defineModel('show')
const infoList = ref([
- { name: '机巢名称', value: '',field:'nickname' },
- { name: '机巢所属地区', value: '',field:'device_area' },
- { name: '机巢状态', value: '',field:'status' },
- { name: '任务成功', value: '',field:'result_num' },
- { name: '机巢位置', value: '',field:'address' },
+ { name: '机巢名称', value: '', field: 'nickname' },
+ { name: '机巢所属地区', value: '', field: 'device_area' },
+ { name: '任务成果', value: '', field: 'result_num' },
+ { name: '机巢位置', value: '', field: 'address' },
+ { name: '机巢状态', value: '', field: 'status' },
])
-const store = useStore();
-const singleTotal = computed(() => store.state.home.singleTotal);
-watch(singleTotal, (val) => {
- if (val?.device_info){
+const store = useStore()
+const singleTotal = computed(() => store.state.home.singleTotal)
+watch(singleTotal, val => {
+ if (val?.device_info) {
infoList.value.forEach(item => {
item.value = val.device_info?.[item.field] || ''
})
}
})
-onMounted(() => {
-})
+onMounted(() => {})
</script>
<style lang="scss">
.machineTableDetails {
+ height: 1002px;
+ background: #0f1929;
+ box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
+ border-radius: 20px 0px 0px 0px;
+ border: 2px solid;
+ padding: 0 !important;
+
+ border-image: linear-gradient(
+ 180deg,
+ rgba(81, 168, 255, 0),
+ rgba(48, 111, 202, 1),
+ rgba(255, 255, 255, 1),
+ rgba(27, 148, 255, 1)
+ )
+ 2 2;
.el-pagination {
text-align: left;
padding: 20px;
+ }
+ .my-header {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 12px;
+ }
+ /* 头部 */
+ .el-dialog__header {
+ width: 1270px;
+ height: 47px;
+ margin-bottom: 14px;
+ background: url('/src/assets/images/home/homeLeft/inspection-vector.png') no-repeat center;
+ background-size: 100% 100%;
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 47px;
+ }
+
+ .el-dialog .el-dialog__header {
+ /* margin: 0px !important; */
+ padding: 0px !important;
+ padding-left: 0px !important;
+ }
+ /* 头部 */
+ .el-dialog__title {
+ width: 112px;
+ height: 19px;
+ font-family: Segoe UI, Segoe UI;
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 16px;
+ text-shadow: 0px 0px 5px rgba(154, 218, 255, 0.6);
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ background: linear-gradient(90deg, #fbfdff 0%, #86d4ff 100%);
+ margin-left: 16px;
+ -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
+ -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
}
}
</style>
<style lang="scss" scoped>
.infoBox {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 10px; // 列之间的间距
- padding: 10px;
-
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ font-size: 14px;
+ color: #ffffff;
.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;
}
- .itemTitle {
- font-weight: bold;
- color: #333;
+ .flystatus {
+ width: 53px;
+ height: 27px;
+ background: #042c53;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #1b94ff;
}
+}
- .itemValue {
- margin-top: 5px;
- color: #666;
+// 详情
+.machineTableDetailsblock {
+ margin: 0 24px;
+}
+.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;
}
}
+// 离线中
+.offine {
+ width: 53px;
+ height: 27px;
+ background: #042c53;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #1b94ff;
+ text-align: center;
+ line-height: 27px;
+ font-size: 14px;
+ color: #1b94ff;
+}
+// 空闲中
+.freetime {
+ width: 53px;
+ height: 27px;
+ text-align: center;
+ line-height: 27px;
+ font-size: 14px;
+ color: #8effac;
+ background: rgba(142, 255, 172, 0.14);
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #8effac;
+}
+.active {
+ color: #04f020;
+}
</style>
--
Gitblit v1.9.3