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

<script setup lang="ts">
import { BaseTable } from "@/components/CustomTable";
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>
<template>
  <div class="bg-basic-content">
    <div class="vehicl-management-wrap">
      <div class="vehicl-management-header mt-[24px] py-[16px] flex items-center">
        <div class="fg-icon mr-[8px]"></div>
        <div class="fg-title">车辆管理</div>
      </div>
      <div class="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)"
                >
                <div class="fg-button-primary">
                  查看详情
                </div>
                </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>

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