5G-Loading-Bay-Web/src/views/dashboard/VehiclManagement.vue

<template>
    <div class="bg_basic_content">
        <div class="vehicl-management-wrap">
            <div class="vehicl-management-header mt-[32px]">
                <ContentHeader bgLayout="1855">
                    <template #title>
                        <div class="w-[200px] bg_title bg_title_7">
                        </div>
                    </template>
                </ContentHeader>
            </div>
            <div class="px-[16px] vehicl-management-content-box">

                <div class="mt-[16px] bg-transparent baseTable_wrap full_table">

                    <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
                        :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
                        :columns="columns" :page="pagination.currentPage" @change="handleTableChange">
                        <template v-slot:actionBar="{ row }">
                            <ul class="flex table_action_box">
                                <li class="flex items-center mr-[16px]" @click="openCurrent(row)">
                                    <el-button text>
                                        <span :style="{
                                            fontSize: '14px',
                                            color: '#37DBFF'
                                        }">
                                            查看详情
                                        </span>
                                    </el-button>
                                </li>
                            </ul>
                        </template>
                    </BaseTable>
                </div>
            </div>
            <VehiclModal v-model:value="isVehiclOpen" :info="currentRow" :image="currFileList" @close="isVehiclOpen = false" />
            <AlarmModal v-model:value="isAlarmOpen" :info="currentDetailRow" :image="currFileList" @close="isAlarmOpen = false" />
        </div>
    </div>
</template>


<script setup lang="ts">
import { BaseTable } from "@/components/CustomTable";
import ContentHeader from '@/components/ContentHeader.vue';
import { getVehiclManagementApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi";
import AlarmModal from './components/AlarmModal.vue'
import { useWebSocketStore } from '@/stores/websocketStore';
import { onBeforeRouteLeave } from 'vue-router';
import VehiclModal from "./components/VehiclModal.vue";

defineOptions({
    name: "VehiclManagementWrap"
});
const currentRow = ref<Record<string, any>>({});
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
const isVehiclOpen = ref<Boolean>(false); //详情弹窗
const currentDetailRow = ref<Record<string, any>>({}); // 当前选中行
const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表

const websocketStore = useWebSocketStore();
// 监听 messages 的变化
watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
    if(newMessages?.length > 0 && !isAlarmOpen.value) {
        currentDetailRow.value = newMessages[newMessages?.length - 1];
        currFileList.value = newMessages[newMessages?.length - 1]?.images;
        isAlarmOpen.value = true;
    }
}, { deep: true, immediate: true });

const columns = [
    {
        label: "车辆ID",
        property: "train_id"
    },
    {
        label: "车厢数量",
        property: "carriage_account"
    },
    {
        label: "入场时间",
        property: "arrive_at"
    },
    {
        label: "出场时间",
        property: "leave_at"
    },
    {
        label: "停留时间",
        property: "stay_duration"
    },
    {
        type: "action",
        label: "操作"
    }
];
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
const listData = ref([]);
const getList = async () => {
    try {
        const { currentPage, pageSize } = pagination.value;
        const res = await getVehiclManagementApi({ current: currentPage, pageSize })
        console.log(res.data, 'getList_data')
        if (isSuccessApi(res)) {
            listData.value = res.data.data;
            pagination.value = {
                ...pagination.value,
                total: res.data.total
            };
        }
    } catch (error) {
        console.error('获取数据失败:', error)
    }
}
function handleTableChange(record) {
    console.log("handleTableChange_record", record);
    pagination.value = {
        ...pagination.value,
        currentPage: record.page,
        pageSize: record.pageSize
    };
    getList();
}

/**查看详情 */
function openCurrent(row) {
    console.log(row, "openCurrent");
    currentRow.value = row;
    isVehiclOpen.value = true;
}

onBeforeRouteLeave(() => {
    isAlarmOpen.value = false;
    currentDetailRow.value = {};
    currFileList.value = [];
});
onMounted(() => {
    getList();
});
</script>

<style lang="scss">
@import url('./VehiclManagement.scss');
</style>