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

<template>
  <div class="appearance-monitor-warp">
    <div class="appearance-monitor-left w-[56%] h-[100%]">
      <div class="monitor-left-top">
        <img src="https://picsum.photos/300/200?random=1" alt="监控画面" />
      </div>
      <div class="monitor-left-bottom">
        <swiper
          :modules="modules"
          :slides-per-view="4"
          :space-between="10"
          navigation
          :pagination="{  type: 'custom',
            el: '.swiper-pagination',
            renderCustom: (swiper, current, total) => '' }"
          :scrollbar="{ draggable: false }"
          :centered-slides="false"
          :observer="true"
          :observeParents="true"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide>
            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
          </swiper-slide>
          <swiper-slide>
            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
          </swiper-slide>
          <swiper-slide>
            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
          </swiper-slide>
          <swiper-slide>
            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
          </swiper-slide>
          <swiper-slide>
            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="appearance-monitor-right w-[44%] h-[100%]">
      <div class="module-header">
        <ContentHeader bgLayout="918">
          <template #title>
            <div class="w-[200px] bg_title bg_title_5"></div>
          </template>
          <template #extra>
            <div></div>
          </template>
        </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="pagination-container">
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import ContentHeader from "@/components/ContentHeader.vue";
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination, Scrollbar } from "swiper/modules";
import "swiper/css";
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
const modules = [Navigation, Pagination, Scrollbar];

// 搜索表单
const searchForm = ref({
  trainNo: "all",
  carriageNo: "all",
  faultType: "all",
});

// 模拟表格数据
const tableData = ref([
  {
    carNo: "CA1001",
    carType: "C64",
    carriageNo: "101",
    warnType: "车辆损坏",
    faultType: "搭扣未搭",
    level: "1",
    review: "是",
    time: "2025-02-05 14:33",
  },
  {
    carNo: "CA1002",
    carType: "C64",
    carriageNo: "101",
    warnType: "车辆损坏",
    faultType: "搭扣未搭",
    level: "1",
    review: "是",
    time: "2025-02-12 15:33",
  },
  // 其他数据...
]);

const total = ref(66);

// 搜索方法
const handleSearch = () => {
  console.log("搜索参数", searchForm.value);
};

// 重置方法
const handleReset = () => {
  searchForm.value = {
    trainNo: "all",
    carriageNo: "all",
    faultType: "all",
  };
};

// 分页切换
const handlePageChange = (page) => {
  console.log("当前页码", page);
};
const onSwiper = (swiper) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};
onMounted(() => {
  onSwiper();
});
</script>
<style scoped lang="scss">
.appearance-monitor-warp {
  height: 100%;
  display: flex;
  justify-content: center;
  // align-items: center;
  // .appearance-monitor-right {
  //     display: flex;
  // }
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  :deep(.el-pagination__total) {
    color: #606266;
    margin-right: 10px;
  }

  :deep(.el-pagination__sizes .el-select__inner) {
    background: #002a5c;
    color: white;
    border: 1px solid #409eff;
  }

  :deep(.el-pagination__item),
  :deep(.el-pagination__button) {
    background: #002a5c;
    color: white;
    border: 1px solid #409eff;
    margin-right: 5px;
  }

  :deep(.el-pagination__item.is-active) {
    background: #409eff;
    color: white;
  }
  .appearance-monitor-left {
    .monitor-left-top {
      min-height: 600px;
      img {
        width: 100%;
        height: 600px;
      }
    }
    .monitor-left-bottom {
      width: 100%;
      overflow: visible;
      .swiper {
        width: 100%;
      height: 100%;
      .swiper-slide {
        width: 20%;
        img {
            width: 100%;
      height: 100%;
        }
      }
      }
    }
  }
}
</style>