feat: 机巢详情弹框

罗广辉

2025-04-03 5c963f3c2f751a2e2f11a8138d65e1e6d929c3c2

feat: 机巢详情弹框

 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
    })
}

 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>
</script>

 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();
// 获取机巢信息

 src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceEvent.vue

New file
@@ -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>

 src/views/SignMachineNest/components/MachineRight/MachineTableDetails/DeviceJob.vue

New file
@@ -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>

 src/views/SignMachineNest/components/MachineRight/MachineTableDetails/MachineTableDetails.vue

New file
@@ -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>

 src/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue

File was deleted