From 5c963f3c2f751a2e2f11a8138d65e1e6d929c3c2 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 03 Apr 2025 14:29:19 +0800
Subject: [PATCH] feat: 机巢详情弹框
---
src/views/SignMachineNest/components/MachineRight/MachineStatus.vue | 2
/dev/null | 87 --------------
src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue | 58 +++++++++
src/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue | 75 ++++++++++++
src/api/home/machineNest.js | 20 +++
src/views/SignMachineNest/SignMachineNest.vue | 5
src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue | 66 +++++++++++
7 files changed, 223 insertions(+), 90 deletions(-)
diff --git a/src/api/home/machineNest.js b/src/api/home/machineNest.js
index f69f70d..6abf443 100644
--- a/src/api/home/machineNest.js
+++ b/src/api/home/machineNest.js
@@ -46,3 +46,23 @@
params: {},
})
}
+
+// 设备-任务列表
+export const getDeviceJobList = (data,params) => {
+ return request({
+ url: `/drone-device-core/wayline/waylineJobInfo/jobList`,
+ method: 'post',
+ data,
+ params
+ })
+}
+
+// 设备-事件列表
+export const getDeviceEventList = (data,params) => {
+ return request({
+ url: `/drone-device-core/jobEvent/eventPage`,
+ method: 'post',
+ data,
+ params
+ })
+}
diff --git a/src/views/SignMachineNest/SignMachineNest.vue b/src/views/SignMachineNest/SignMachineNest.vue
index 859a9e2..e84a9fd 100644
--- a/src/views/SignMachineNest/SignMachineNest.vue
+++ b/src/views/SignMachineNest/SignMachineNest.vue
@@ -31,7 +31,6 @@
const messageHandler = (result) => {
let payload = JSON.parse(result) // 为了兼容聊天消息
- // console.log('payload', payload)
if (!payload) return
switch (payload.biz_code) {
case EBizCode.GatewayOsd: {
@@ -83,6 +82,8 @@
getFlightStatistics(singleUavHome.value.device_sn).then(res => {
if (res.data.code !== 0) return;
const result = res.data.data;
+ console.log(result);
+ console.log(result);
store.commit('setSingleTotal', result);
})
};
@@ -95,4 +96,4 @@
onUnmounted(() => {
connectWs?.value?.close();
});
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/SignMachineNest/components/MachineRight/MachineStatus.vue b/src/views/SignMachineNest/components/MachineRight/MachineStatus.vue
index 16d9c0c..b952909 100644
--- a/src/views/SignMachineNest/components/MachineRight/MachineStatus.vue
+++ b/src/views/SignMachineNest/components/MachineRight/MachineStatus.vue
@@ -75,7 +75,7 @@
import { EModeCode, EDockModeText, EModeText } from '@/utils/staticData/device';
import { getLnglatAltitude } from '@/utils/cesium/mapUtil.js';
import { useStore } from 'vuex';
-import MachineTableDetails from '@/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue';
+import MachineTableDetails from '@/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue';
const store = useStore();
// 获取机巢信息
diff --git a/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue b/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue
new file mode 100644
index 0000000..9bbe2c3
--- /dev/null
+++ b/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue
@@ -0,0 +1,66 @@
+<template>
+ <el-divider content-position="left">相关事件 {{total}}次</el-divider>
+ <el-table :data="list" style="width: 100%">
+ <el-table-column prop="event_num" label="编号" />
+ <el-table-column prop="event_name" label="名称" />
+ <el-table-column prop="media_type" label="类型" />
+ <el-table-column prop="photo_url" label="图片url" />
+ <el-table-column prop="video_url" label="视频url" />
+ <el-table-column prop="remark" 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 prop="wayline_job_id" label=" 任务id" />
+ </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"
+ />
+</template>
+<script setup>
+import { useStore } from 'vuex'
+import { getDeviceEventList } from '@/api/home/machineNest'
+
+
+const list = ref([])
+const params = ref({
+ device_sn: null,
+})
+const sizeParams = ref({
+ current: 1,
+ size: 1,
+})
+const store = useStore()
+const child_sn = computed(() => store.state.home.singleUavHome.child_sn)
+const total = ref(0)
+
+const getList = () => {
+ params.value.device_sn = child_sn.value
+ getDeviceEventList(params.value, sizeParams.value).then(res => {
+ const resData = res?.data?.data || {}
+ list.value = resData.records
+ total.value = resData.total
+ })
+}
+const pageChange = val => {
+ sizeParams.value.current = val
+ getList()
+}
+
+onMounted(() => {
+ getList()
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue b/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue
new file mode 100644
index 0000000..02ea1ad
--- /dev/null
+++ b/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue
@@ -0,0 +1,58 @@
+<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="device_names" label="设备名称" />
+ <el-table-column prop="creator_name" label="创建者姓名" />
+ </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"
+ />
+</template>
+<script setup>
+import { useStore } from 'vuex'
+import { getDeviceJobList } from '@/api/home/machineNest'
+
+const list = ref([])
+const params = ref({
+ device_sn: null,
+})
+const sizeParams = ref({
+ current: 1,
+ size: 1,
+})
+const store = useStore()
+const child_sn = computed(() => store.state.home.singleUavHome.child_sn)
+const total = ref(0)
+
+const getList = () => {
+ params.value.device_sn = child_sn.value
+ getDeviceJobList(params.value, sizeParams.value).then(res => {
+ const resData = res?.data?.data || {}
+ list.value = resData.records
+ total.value = resData.total
+ })
+}
+const pageChange = val => {
+ sizeParams.value.current = val
+ getList()
+}
+onMounted(() => {
+ getList()
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue b/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue
new file mode 100644
index 0000000..29a5f87
--- /dev/null
+++ b/src/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue
@@ -0,0 +1,75 @@
+<!-- 机巢列表详情 -->
+<template>
+ <el-dialog
+ modal-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>
+ </div>
+ </div>
+ <DeviceJob v-if="isShowDetails" />
+ <DeviceEvent v-if="isShowDetails" />
+ </el-dialog>
+</template>
+
+<script setup>
+import DeviceEvent from '@/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue'
+import DeviceJob from '@/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue'
+import { pxToRem } from '@/utils/rem';
+
+const isShowDetails = defineModel('show')
+
+const infoList = ref([
+ { name: '机巢名称', value: 'xxx' },
+ { name: '机巢所属地区', value: 'xxx' },
+ { name: '机巢状态', value: 'xxx' },
+ { name: '任务成功', value: 'xxx' },
+ { name: '机巢位置', value: 'xxx' },
+])
+
+onMounted(() => {})
+</script>
+
+<style lang="scss">
+.machineTableDetails {
+ .el-pagination {
+ text-align: left;
+ padding: 20px;
+ }
+}
+</style>
+
+<style lang="scss" scoped>
+.infoBox {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px; // 列之间的间距
+ padding: 10px;
+
+ .itemBox {
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 15px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ }
+
+ .itemTitle {
+ font-weight: bold;
+ color: #333;
+ }
+
+ .itemValue {
+ margin-top: 5px;
+ color: #666;
+ }
+}
+</style>
diff --git a/src/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue b/src/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue
deleted file mode 100644
index 9708b45..0000000
--- a/src/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<!-- 机巢列表详情 -->
-<template>
- <div>
-
- </div>
- <el-dialog
- v-model="isShowDetails"
- title="机巢详情"
- width="800px"
- :close-on-click-modal="false"
- :destroy-on-close="true"
- >
- <el-table :data="tableData" style="width: 100%">
- <el-table-column prop="name" label="名称" />
- <el-table-column prop="value" label="数值" />
- <el-table-column prop="status" label="状态" />
- <el-table-column prop="time" label="时间" />
- </el-table>
- </el-dialog>
-</template>
-
-<script setup>
-const props = defineProps({
- dialogVisible: {
- type: Boolean,
- default: false,
- },
-});
-
-const isShowDetails = defineModel('show')
-
-// const dialogVisible = ref(false);
-const tableData = ref([
- {
- name: '机巢1号',
- value: '98%',
- status: '正常',
- time: '2024-03-20 10:00:00'
- },
- {
- name: '电池状态',
- value: '95%',
- status: '正常',
- time: '2024-03-20 10:00:00'
- },
- {
- name: '信号强度',
- value: '强',
- status: '正常',
- time: '2024-03-20 10:00:00'
- }
-]);
-</script>
-
-<style lang="scss" scoped>
-// ... 其他样式 ...
-
-:deep(.el-dialog) {
- background: linear-gradient(
- 270deg,
- #1f3e7a 0%,
- rgba(31, 62, 122, 0.95) 79%,
- rgba(31, 62, 122, 0.9) 100%
- );
- .el-dialog__header {
- color: #fff;
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- margin: 0;
- padding: 15px 20px;
- .el-dialog__title {
- color: #fff;
- }
- }
- .el-dialog__body {
- color: #fff;
- padding: 20px;
- }
- .el-table {
- background-color: transparent;
- --el-table-tr-bg-color: transparent;
- --el-table-border-color: rgba(255, 255, 255, 0.1);
- --el-table-header-bg-color: rgba(31, 62, 122, 0.5);
- --el-table-header-text-color: #fff;
- --el-table-text-color: #fff;
- }
-}
-</style>
--
Gitblit v1.9.3