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/DeviceEvent.vue | 256 +++++++++++++++++---
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue | 183 ++++++++++++--
src/views/Home/useMapAggregation/useMapAggregation.js | 30 -
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue | 240 +++++++++++++++++--
4 files changed, 579 insertions(+), 130 deletions(-)
diff --git a/src/views/Home/useMapAggregation/useMapAggregation.js b/src/views/Home/useMapAggregation/useMapAggregation.js
index 0153d50..8678176 100644
--- a/src/views/Home/useMapAggregation/useMapAggregation.js
+++ b/src/views/Home/useMapAggregation/useMapAggregation.js
@@ -48,7 +48,6 @@
let viewer = null
let active = null
let handler = null
- let positionC3 = null
let currentEntity = null
const store = useStore()
@@ -410,11 +409,12 @@
// 弹框位置刷新
const labelBoxRender = () => {
+ if (!currentEntity) return
let dom = document.querySelector('#mapPopUpBox')
if (!dom) {
dom = getLabelDom(currentEntity.properties.customData._value.data)
}
- const screenPosition = viewer.scene.cartesianToCanvasCoordinates(positionC3)
+ const screenPosition = viewer.scene.cartesianToCanvasCoordinates(currentEntity?.position?._value)
if (screenPosition) {
dom.style.left = `${screenPosition.x}px`
dom.style.top = `${screenPosition.y}px`
@@ -426,7 +426,7 @@
* 根据条件获取项
* @param {Array} arr 数据源
* @param {Function} condition 条件
- * @returns
+ * @returns
*/
const findTypeItem = (arr, condition) => {
return arr.find(item => condition(item))
@@ -437,21 +437,14 @@
let clickTargets = viewer.scene.drillPick(click.position).map(item => item.id)
if (!clickTargets.length) return
- let deviceAggregationFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type == 'deviceAggregation')
- let deviceFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type == 'device')
- let eventFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type == 'event')
-
- const curEntity = deviceAggregationFind || deviceFind || eventFind
-
- if (!curEntity) return
-
- currentEntity = curEntity
- const entityPosition = curEntity?.position?._value
- if (!entityPosition) return
- if (entityPosition) {
- positionC3 = entityPosition
- }
-
+ let deviceAggregationFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'deviceAggregation')
+ let deviceFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'device')
+ let eventFind = findTypeItem(clickTargets, (item) => item?.properties?.customData?._value?.data?.type === 'event')
+ currentEntity = deviceAggregationFind || deviceFind || eventFind
+ if (!currentEntity) return
+ if (!currentEntity?.position?._value) return
+ // 一定要移除
+ removeLabel()
if (deviceAggregationFind || eventFind) {
viewer.scene.postRender.addEventListener(labelBoxRender)
}
@@ -498,7 +491,6 @@
viewer = null
active = null
handler = null
- positionC3 = null
currentEntity = null
}
const init = () => {
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
index 9797c3c..e63fd7e 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
@@ -1,47 +1,60 @@
<template>
- <el-divider content-position="left">相关事件 {{total}}次</el-divider>
- <el-table :data="list" style="width: 100%">
- <el-table-column prop="id" label="id" />
- <el-table-column prop="event_name" label="名称" />
- <el-table-column prop="media_type" label="类型" />
- <el-table-column prop="ai_types" label="关联算法" />
- <el-table-column prop="photo_url" label="图片url" />
- <el-table-column prop="video_url" label="视频url" />
- <el-table-column prop="status" label="状态">
- <template #default="scope">
- <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
- <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag>
- <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag>
- <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag>
- <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag>
- <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag>
- </template>
- </el-table-column>
- <el-table-column prop="event_dict_key" label="event_dict_key" />
- <el-table-column prop="create_time" label="创建时间" />
+ <div class="deviceevent-container">
+ <div class="machineTableDetailsTitle">
+ <p>
+ 相关事件 <span>{{ total }}</span
+ >件
+ </p>
+ </div>
+ <div class="deviceevent-table">
+ <el-table :data="list" :row-class-name="tableRowClassName"
+ style="width: 100%;"
+ :row-style="{ height: '48px', fontSize: '14px', 'text-align': 'center' }"
+ :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }">
+ <el-table-column label="序号" type="index" width="60">
+ <template #default="{ $index }">
+ {{ ($index + 1).toString().padStart(2, '0') }}
+ </template>
+ </el-table-column>
+ <el-table-column prop="id" label="事件编号" />
+ <el-table-column prop="event_name" label="事件名称" />
+ <el-table-column prop="event_name" label="所属单位 " />
+ <el-table-column prop="media_type" label="事件内容" />
+ <el-table-column prop="ai_types" label="关联算法" />
+ <el-table-column prop="status" label="事件状态">
+ <template #default="scope">
+ <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
+ <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag>
+ <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag>
+ <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag>
+ <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag>
+ <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag>
+ </template>
+ </el-table-column>
- <el-table-column label="操作" >
- <template #default="scope">
- <el-button type="primary" link @click="examine(scope.row)">审核</el-button>
- <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- background
- :page-sizes="[10, 20, 30, 50]"
- v-model:current-page="sizeParams.current"
- v-model:page-size="sizeParams.size"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- @change="pageChange"
- />
+ <el-table-column label="操作">
+ <template #default="scope">
+ <el-button type="primary" link @click="examine(scope.row)">审核</el-button>
+ <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <el-pagination
+ background
+ :page-sizes="[10, 20, 30, 50]"
+ v-model:current-page="sizeParams.current"
+ v-model:page-size="sizeParams.size"
+ layout="prev, pager, next, jumper"
+ :total="total"
+ @change="pageChange"
+ />
+ </div>
</template>
<script setup>
import { useStore } from 'vuex'
import { getDeviceEventList } from '@/api/home/machineNest'
-import { ElMessage } from 'element-plus';
-
+import { ElMessage } from 'element-plus'
const list = ref([])
const params = ref({
@@ -49,7 +62,7 @@
})
const sizeParams = ref({
current: 1,
- size: 10,
+ size: 5,
})
const store = useStore()
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
@@ -59,7 +72,7 @@
ElMessage.warning('正在加急开发中...')
}
const examine = row => {
- ElMessage.warning('正在加急开发中...')
+ ElMessage.warning('正在加急开发中...')
}
const getList = () => {
@@ -74,9 +87,168 @@
sizeParams.value.current = val
getList()
}
-
+// 表格隔行变色
+const tableRowClassName = ({ row, rowIndex }) => {
+ if (rowIndex % 2 === 1) {
+ return 'warning-row'
+ } else {
+ return 'success-row'
+ }
+}
onMounted(() => {
getList()
})
</script>
-<style scoped lang="scss"></style>
+<style lang="scss">
+.deviceevent-container {
+ // 表格
+ .el-table__inner-wrapper:before {
+ height: 0 !important;
+ }
+ .el-table .warning-row {
+ --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
+ }
+ .el-table .warning-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 50%,
+ rgba(25, 162, 255, 0) 90%
+ )
+ 2 2 2 2;
+ }
+ .el-table .success-row {
+ --el-table-tr-bg-color: #0b1d38;
+ }
+ .el-table .success-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 79%,
+ rgba(25, 162, 255, 0) 90%
+ )
+ 2 2 2 2;
+ }
+}
+</style>
+<style scoped lang="scss">
+.deviceevent-container {
+margin-top: 50px;
+}
+// 标题
+.machineTableDetailsTitle {
+ margin: 0 24px;
+ margin-bottom: 16px;
+ background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
+ background-size: 100% 100%;
+ p {
+ display: inline-block;
+ margin-left: 30px;
+ font-size: 16px;
+ color: #ddf0ff;
+ line-height: 20px;
+ text-align: left;
+ margin-bottom: 8px;
+ span {
+ font-size: 26px;
+ color: #0282ff;
+ font-weight: bold;
+ }
+ }
+}
+// 表格
+.deviceevent-table {
+padding: 0 17px;
+}
+.el-table {
+ color: #fff;
+ --el-table-border-color: var(--el-border-color-lighter);
+ --el-table-border: none !important;
+ --el-table-text-color: #fff !important;
+ --el-table-header-text-color: #fff !important;
+ --el-table-row-hover-bg-color: none !important;
+ --el-table-current-row-bg-color: none !important;
+ --el-table-header-bg-color: none !important;
+ --el-table-fixed-box-shadow: none !important;
+ --el-table-bg-color: none !important;
+ --el-table-tr-bg-color: none !important;
+ --el-table-expanded-cell-bg-color: none !important;
+ --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+ --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+}
+.el-table__header {
+ width: 0 !important;
+}
+.el-table__body {
+ border-collapse: collapse;
+}
+:deep(.el-table .el-table__cell) {
+ padding: 0 !important;
+ text-align: center !important;
+}
+:deep(.el-table .el-table__cell) {
+ padding: 0 !important;
+}
+:deep(.el-table thead) {
+ border-bottom: 1px solid;
+ border: 1px solid;
+ border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
+ color: var(--el-table-header-text-color);
+ background: #102441;
+}
+// 分页
+:deep(.el-pagination) {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: 4px;
+ margin-top: 15px;
+}
+:deep(.el-pagination button) {
+ background: center center no-repeat none !important;
+ color: #8eb8ea !important;
+}
+:deep(.el-pager li) {
+ background: none !important;
+ color: #8eb8ea !important;
+}
+:deep(.el-pager li.is-active) {
+ background: #021022 !important;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #1479ef;
+ color: #c7e1ff !important;
+}
+:deep(.el-pagination__goto) {
+ color: #c7e1ff !important;
+}
+:deep(.el-pagination__classifier) {
+ color: #c7e1ff !important;
+}
+:deep(.el-pager .el-input__wrapper) {
+ background: #021022 !important;
+ color: #c7e1ff !important;
+ border: 1px solid #1479ef !important;
+ z-index: 1;
+}
+:deep(.el-input__wrapper) {
+ background: #021022 !important;
+ box-shadow: none !important;
+ border: 1px solid #178bff;
+ color: #fff !important;
+}
+:deep(.el-input__inner) {
+ color: #fff !important;
+}
+</style>
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
index 29e661e..e052b0e 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
@@ -1,38 +1,53 @@
<template>
- <el-divider content-position="left">相关任务 {{ total }}次</el-divider>
- <el-table :data="list" style="width: 100%">
- <el-table-column prop="id" label="id" />
- <el-table-column prop="name" label="名称" />
- <el-table-column prop="industry_type_str" label="任务类型" />
- <el-table-column prop="ai_type_str" label="关联算法" />
- <el-table-column prop="event_number" label="事件工单" />
- <el-table-column prop="remark" label="备注" />
- <el-table-column prop="area_code" label="地区代码" />
- <el-table-column prop="begin_time" label="开始时间" />
- <el-table-column prop="end_time" label="结束时间" />
- <el-table-column prop="creator_name" label="创建者" />
- <el-table-column label="操作">
- <template #default="scope">
- <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- background
- :page-sizes="[10, 20, 30, 50]"
- v-model:current-page="sizeParams.current"
- v-model:page-size="sizeParams.size"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- @change="pageChange"
- />
+ <div class="devicejob-container">
+ <div class="machineTableDetailsTitle">
+ <p>
+ 相关任务 <span>{{ total }}</span
+ >次
+ </p>
+ </div>
+ <div class="devicelob-table">
+ <el-table
+ :data="list"
+ :row-class-name="tableRowClassName"
+ style="width: 100%"
+ :row-style="{ height: '48px', fontSize: '14px', 'text-align': 'center' }"
+ :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
+ >
+ <el-table-column label="序号" type="index" width="60">
+ <template #default="{ $index }">
+ {{ ($index + 1).toString().padStart(2, '0') }}
+ </template>
+ </el-table-column>
+ <el-table-column prop="id" label="任务编号" />
+ <el-table-column prop="name" label="任务名称" />
+ <el-table-column prop="industry_type_str" label="任务类型" />
+ <el-table-column prop="ai_type_str" label="关联算法" />
+ <el-table-column prop="event_number" label="事件工单" />
- <DeviceJobDetails v-model:show="deviceJobDetailsShow"/>
+ <el-table-column label="操作">
+ <template #default="scope">
+ <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <el-pagination
+ background
+ :page-sizes="[10, 20, 30, 50]"
+ v-model:current-page="sizeParams.current"
+ v-model:page-size="sizeParams.size"
+ layout=" prev, pager, next, jumper"
+ :total="total"
+ @change="pageChange"
+ />
+ </div>
+ <DeviceJobDetails v-model:show="deviceJobDetailsShow" />
</template>
<script setup>
import { useStore } from 'vuex'
-import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue';
+import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue'
import { getDeviceJobList } from '@/api/home/task'
const list = ref([])
@@ -41,7 +56,7 @@
})
const sizeParams = ref({
current: 1,
- size: 10,
+ size: 5,
})
const store = useStore()
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
@@ -49,9 +64,9 @@
const deviceJobDetailsShow = ref(false)
const wayLineJodInfoId = ref(null)
provide('wayLineJodInfoId', wayLineJodInfoId)
-const viewJob = (row) => {
- wayLineJodInfoId.value = row.id
- deviceJobDetailsShow.value = true
+const viewJob = row => {
+ wayLineJodInfoId.value = row.id
+ deviceJobDetailsShow.value = true
}
const getList = () => {
@@ -67,8 +82,165 @@
sizeParams.value.current = val
getList()
}
+// 表格隔行变色
+const tableRowClassName = ({ row, rowIndex }) => {
+ if (rowIndex % 2 === 1) {
+ return 'warning-row'
+ } else {
+ return 'success-row'
+ }
+}
onMounted(() => {
getList()
})
</script>
-<style scoped lang="scss"></style>
+<style lang="scss">
+.devicejob-container {
+ // 表格
+ .el-table__inner-wrapper:before {
+ height: 0 !important;
+ }
+ .el-table .warning-row {
+ --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
+ }
+ .el-table .warning-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 50%,
+ rgba(25, 162, 255, 0) 90%
+ )
+ 2 2 2 2;
+ }
+ .el-table .success-row {
+ --el-table-tr-bg-color: #0b1d38;
+ }
+ .el-table .success-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 79%,
+ rgba(25, 162, 255, 0) 90%
+ )
+ 2 2 2 2;
+ }
+}
+</style>
+<style scoped lang="scss">
+// 标题
+.machineTableDetailsTitle {
+ margin: 0 24px;
+ margin-bottom: 16px;
+ background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
+ background-size: 100% 100%;
+ p {
+ display: inline-block;
+ margin-left: 30px;
+ font-size: 16px;
+ color: #ddf0ff;
+ line-height: 20px;
+ text-align: left;
+ margin-bottom: 8px;
+ span {
+ font-size: 26px;
+ color: #0282ff;
+ font-weight: bold;
+ }
+ }
+}
+// 表格
+.devicelob-table {
+ padding: 0 17px;
+}
+.el-table {
+ color: #fff;
+ --el-table-border-color: var(--el-border-color-lighter);
+ --el-table-border: none !important;
+ --el-table-text-color: #fff !important;
+ --el-table-header-text-color: #fff !important;
+ --el-table-row-hover-bg-color: none !important;
+ --el-table-current-row-bg-color: none !important;
+ --el-table-header-bg-color: none !important;
+ --el-table-fixed-box-shadow: none !important;
+ --el-table-bg-color: none !important;
+ --el-table-tr-bg-color: none !important;
+ --el-table-expanded-cell-bg-color: none !important;
+ --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+ --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+}
+.el-table__header {
+ width: 0 !important;
+}
+.el-table__body {
+ border-collapse: collapse;
+}
+:deep(.el-table .el-table__cell) {
+ padding: 0 !important;
+ text-align: center !important;
+}
+:deep(.el-table .el-table__cell) {
+ padding: 0 !important;
+}
+:deep(.el-table thead) {
+ border-bottom: 1px solid;
+ border: 1px solid;
+ border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
+ color: var(--el-table-header-text-color);
+ background: #102441;
+}
+// 分页
+:deep(.el-pagination) {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: 4px;
+ margin-top: 15px;
+}
+:deep(.el-pagination button) {
+ background: center center no-repeat none !important;
+ color: #8eb8ea !important;
+}
+:deep(.el-pager li) {
+ background: none !important;
+ color: #8eb8ea !important;
+}
+:deep(.el-pager li.is-active) {
+ background: #021022 !important;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #1479ef;
+ color: #c7e1ff !important;
+}
+:deep(.el-pagination__goto) {
+ color: #c7e1ff !important;
+}
+:deep(.el-pagination__classifier) {
+ color: #c7e1ff !important;
+}
+:deep(.el-pager .el-input__wrapper) {
+ background: #021022 !important;
+ color: #c7e1ff !important;
+ border: 1px solid #1479ef !important;
+ z-index: 1;
+}
+:deep(.el-input__wrapper) {
+ background: #021022 !important;
+ box-shadow: none !important;
+ border: 1px solid #178bff;
+ color: #fff !important;
+}
+:deep(.el-input__inner) {
+ color: #fff !important;
+}
+</style>
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