feat: 车辆管理页面开发
JINGYJ
7 days ago
parent
60688aad04
commit
e40a1222bd
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,21 @@
|
||||
|
||||
.vehicl-management-wrap{
|
||||
height: 813px;
|
||||
background-image: url("@/assets/common/device_status_bg_line.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.vehicl-management-content-box{
|
||||
|
||||
.el-scrollbar__view {
|
||||
background: transparent !important;
|
||||
height: 600px;
|
||||
}
|
||||
.el-table__inner-wrapper{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.el-table__body-wrapper, .el-scrollbar__wrap, .el-scrollbar{
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,145 @@
|
||||
<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="currentDetailRow" :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 { getDeviceStatusApi } 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: "device_name"
|
||||
},
|
||||
{
|
||||
label: "车厢数量",
|
||||
property: "device_number"
|
||||
},
|
||||
{
|
||||
label: "入场时间",
|
||||
property: "device_position"
|
||||
},
|
||||
{
|
||||
label: "出场时间",
|
||||
property: "device_position"
|
||||
},
|
||||
{
|
||||
label: "停留时间",
|
||||
property: "device_position"
|
||||
},
|
||||
{
|
||||
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 getDeviceStatusApi({ 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>
|
||||
Loading…
Reference in New Issue