|
|
|
|
@ -6,25 +6,11 @@
|
|
|
|
|
<video src=""></video>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="monitor-left-bottom">
|
|
|
|
|
<swiper
|
|
|
|
|
ref="swiperRef"
|
|
|
|
|
:modules="modules"
|
|
|
|
|
:slides-per-view="4"
|
|
|
|
|
:space-between="10"
|
|
|
|
|
navigation
|
|
|
|
|
:scrollbar="{ draggable: false }"
|
|
|
|
|
:centered-slides="false"
|
|
|
|
|
:observer="true"
|
|
|
|
|
:observeParents="true"
|
|
|
|
|
@swiper="onSwiper"
|
|
|
|
|
@slideChange="onSlideChange"
|
|
|
|
|
>
|
|
|
|
|
<swiper-slide
|
|
|
|
|
v-for="(image, index) in images"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="handleSlideClick(index)"
|
|
|
|
|
:class="{ 'active-slide': activeIndex === index }"
|
|
|
|
|
>
|
|
|
|
|
<swiper ref="swiperRef" :modules="modules" :slides-per-view="4" :space-between="10" navigation
|
|
|
|
|
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
|
|
|
|
|
@swiper="onSwiper" @slideChange="onSlideChange">
|
|
|
|
|
<swiper-slide v-for="(image, index) in images" :key="index" @click="handleSlideClick(index)"
|
|
|
|
|
:class="{ 'active-slide': activeIndex === index }">
|
|
|
|
|
<img :src="image" alt="Slide" />
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
@ -42,57 +28,48 @@
|
|
|
|
|
</ContentHeader>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 表格区域 -->
|
|
|
|
|
<el-table
|
|
|
|
|
:data="tableData"
|
|
|
|
|
stripe
|
|
|
|
|
style="width: 100%; margin-top: 20px"
|
|
|
|
|
class="custom-table"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column prop="carNo" label="车号" width="80"></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="carType"
|
|
|
|
|
label="车型"
|
|
|
|
|
width="60"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="carriageNo"
|
|
|
|
|
label="车厢号"
|
|
|
|
|
width="80"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="warnType"
|
|
|
|
|
label="告警类型"
|
|
|
|
|
width="80"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="faultType"
|
|
|
|
|
label="故障类型"
|
|
|
|
|
width="120"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column prop="level" label="等级" width="60"></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="review"
|
|
|
|
|
label="复核"
|
|
|
|
|
width="60"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column prop="time" label="时间" width="120"></el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<div class="px-[16px]">
|
|
|
|
|
|
|
|
|
|
<!-- 分页区域 -->
|
|
|
|
|
|
|
|
|
|
<div class="pagination-container">
|
|
|
|
|
<el-pagination
|
|
|
|
|
:page-sizes="[100, 200, 300, 400]"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="400"
|
|
|
|
|
/>
|
|
|
|
|
<div class="appearance-monitor-search-box">
|
|
|
|
|
<el-select v-model="searchForm.name" placeholder="列车号" class="custom-select">
|
|
|
|
|
<el-option label="A" value="deviceA"></el-option>
|
|
|
|
|
<el-option label="B" value="deviceB"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select v-model="searchForm.deviceId" placeholder="车厢号" class="custom-select">
|
|
|
|
|
<el-option label="ID-001" value="id001"></el-option>
|
|
|
|
|
<el-option label="ID-002" value="id002"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select v-model="searchForm.faultType" placeholder="故障类型" class="custom-select">
|
|
|
|
|
<el-option label="类型1" value="id001"></el-option>
|
|
|
|
|
<el-option label="类型2" value="id002"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
|
|
|
|
|
<span class="icon"></span> 查询
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button @click="handleReset" class="basic-btn reset-btn">
|
|
|
|
|
<span class="icon"></span> 重置
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 右侧表格区域 -->
|
|
|
|
|
<div class="right-panel w-[768px]">
|
|
|
|
|
<div class="bg-transparent baseTable_wrap">
|
|
|
|
|
<template v-if="pagination.total > 0">
|
|
|
|
|
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize"
|
|
|
|
|
:dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
|
|
|
|
|
@change="handleTableChange">
|
|
|
|
|
</BaseTable>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import ContentHeader from "@/components/ContentHeader.vue";
|
|
|
|
|
import { computed, onMounted, onUnmounted, ref } from "vue";
|
|
|
|
|
import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
|
|
import { Navigation, Scrollbar } from "swiper/modules";
|
|
|
|
|
import "swiper/css";
|
|
|
|
|
@ -100,58 +77,100 @@ import 'swiper/scss';
|
|
|
|
|
import 'swiper/scss/navigation';
|
|
|
|
|
const modules = [Navigation, Scrollbar];
|
|
|
|
|
|
|
|
|
|
// 搜索表单
|
|
|
|
|
const searchForm = ref({
|
|
|
|
|
trainNo: "all",
|
|
|
|
|
carriageNo: "all",
|
|
|
|
|
faultType: "all",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 模拟表格数据
|
|
|
|
|
const tableData = ref([
|
|
|
|
|
// const currentRow = ref<Record<string, any>>({});
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
carNo: "CA1001",
|
|
|
|
|
carType: "C64",
|
|
|
|
|
carriageNo: "101",
|
|
|
|
|
warnType: "车辆损坏",
|
|
|
|
|
faultType: "搭扣未搭",
|
|
|
|
|
level: "1",
|
|
|
|
|
review: "是",
|
|
|
|
|
time: "2025-02-05 14:33",
|
|
|
|
|
label: "车号",
|
|
|
|
|
property: "carNo",
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
carNo: "CA1002",
|
|
|
|
|
carType: "C64",
|
|
|
|
|
carriageNo: "101",
|
|
|
|
|
warnType: "车辆损坏",
|
|
|
|
|
faultType: "搭扣未搭",
|
|
|
|
|
level: "1",
|
|
|
|
|
review: "是",
|
|
|
|
|
time: "2025-02-12 15:33",
|
|
|
|
|
label: "车型",
|
|
|
|
|
property: "carType",
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
// 其他数据...
|
|
|
|
|
]);
|
|
|
|
|
{
|
|
|
|
|
label: "车厢号",
|
|
|
|
|
property: "carriageNo",
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "告警类型",
|
|
|
|
|
property: "warnType",
|
|
|
|
|
width: 120,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "故障类型",
|
|
|
|
|
property: "faultType",
|
|
|
|
|
width: 120,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "等级",
|
|
|
|
|
property: "level",
|
|
|
|
|
width: 60,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "复核",
|
|
|
|
|
property: "review",
|
|
|
|
|
width: 60,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "时间",
|
|
|
|
|
property: "date"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const total = ref(66);
|
|
|
|
|
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
|
|
|
|
|
|
|
|
|
// 搜索方法
|
|
|
|
|
const handleSearch = () => {
|
|
|
|
|
console.log("搜索参数", searchForm.value);
|
|
|
|
|
const listData = ref([]);
|
|
|
|
|
// 搜索表单
|
|
|
|
|
const searchForm = reactive({
|
|
|
|
|
trainNo: "",
|
|
|
|
|
carriageNo: "",
|
|
|
|
|
faultType: "",
|
|
|
|
|
});
|
|
|
|
|
const dataLoading = ref(true);
|
|
|
|
|
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
|
const res = await fetch('/api/getPoleMonitorList', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: JSON.stringify({ ...searchForm, page: currentPage, pageSize })
|
|
|
|
|
})
|
|
|
|
|
const { data } = await res.json()
|
|
|
|
|
console.log(data, 'getList_data')
|
|
|
|
|
listData.value = data.list;
|
|
|
|
|
console.log(data.list);
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
total: data.total
|
|
|
|
|
};
|
|
|
|
|
dataLoading.value = false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 查询方法
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
getList()
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 重置方法
|
|
|
|
|
const handleReset = () => {
|
|
|
|
|
searchForm.value = {
|
|
|
|
|
trainNo: "all",
|
|
|
|
|
carriageNo: "all",
|
|
|
|
|
faultType: "all",
|
|
|
|
|
};
|
|
|
|
|
searchForm.trainNo = '';
|
|
|
|
|
// deviceId.value = '';
|
|
|
|
|
getList()
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 分页切换
|
|
|
|
|
const handlePageChange = (page) => {
|
|
|
|
|
console.log("当前页码", page);
|
|
|
|
|
};
|
|
|
|
|
function handleTableChange(record) {
|
|
|
|
|
console.log("handleTableChange_record", record);
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
currentPage: record.page,
|
|
|
|
|
pageSize: record.pageSize
|
|
|
|
|
};
|
|
|
|
|
getList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const images = ref([
|
|
|
|
|
'https://picsum.photos/300/200?random=1',
|
|
|
|
|
'https://picsum.photos/300/200?random=2',
|
|
|
|
|
@ -176,6 +195,10 @@ const onSwiper = (swiper) => {
|
|
|
|
|
const onSlideChange = () => {
|
|
|
|
|
console.log("slide change");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getList();
|
|
|
|
|
});
|
|
|
|
|
// // 窗口大小改变时更新 Swiper
|
|
|
|
|
// const handleResize = () => {
|
|
|
|
|
// if (swiperRef.value) {
|
|
|
|
|
|
JINGYJ
2 months ago