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="imageBig" alt="监控画面" /> -->
        <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 }"
          >
            <img :src="image" alt="Slide" />
          </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 { computed, onMounted, onUnmounted, ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules";
import "swiper/css";
import 'swiper/scss';
import 'swiper/scss/navigation';
const modules = [Navigation, 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 images = ref([
  'https://picsum.photos/300/200?random=1',
  'https://picsum.photos/300/200?random=2',
  'https://picsum.photos/300/200?random=3',
  'https://picsum.photos/300/200?random=4',
  'https://picsum.photos/300/200?random=5'
]);
const imageBig = ref(images.value[0])
const activeIndex = ref(-1);

const handleSlideClick = (index) => {
  console.log(index);
  activeIndex.value = index;
  imageBig.value = images.value[index];
};
const swiperRef = ref(null);
console.log(swiperRef.value);
const onSwiper = (swiper) => {
  swiperRef.value = swiper;
  console.log('Swiper 实例已获取:', swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};
// // 窗口大小改变时更新 Swiper
// const handleResize = () => {
//   if (swiperRef.value) {
//     swiperRef.value.update();
//   }
// };

// onMounted(() => {
//   window.addEventListener('resize', handleResize);
// });

// onUnmounted(() => {
//   window.removeEventListener('resize', handleResize);
// });
</script>
<style lang="scss">
@import url('./AppearanceMonitor.scss');
</style>