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>
      <!-- 表格区域 -->
      <!-- 搜索区域 -->
      <div class="px-[16px]">

        <div class="appearance-monitor-search-box">
          <el-select v-model="searchForm.train_number" 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.train_carriage_number" 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.fault_type" 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":row-class-name="handleRowClassName"
                @row-click="handleRowClick">
              </BaseTable>
            </template>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script lang="ts" setup>
import ContentHeader from "@/components/ContentHeader.vue";
import { BaseTable } from "@/components/CustomTable";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules";
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
import "swiper/css";
import 'swiper/scss';
import 'swiper/scss/navigation';
const modules = [Navigation, Scrollbar];

// const currentRow = ref<Record<string, any>>({});
const columns = [
  {
    label: "车号",
    property: "train_number",
    width: 80,
  },
  {
    label: "车型",
    property: "train_model",
    width: 80,
  },
  {
    label: "车厢号",
    property: "train_carriage_number",
    width: 80,
  },
  {
    label: "告警类型",
    property: "alarm_type",
    width: 120,
  },
  {
    label: "故障类型",
    property: "fault_type",
    width: 120,
  },
  {
    label: "等级",
    property: "level",
    width: 60,
  },
  {
    label: "复核",
    property: "is_reviewed",
    width: 60,
  },
  {
    label: "时间",
    property: "created_at"
  }
]

const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });

const listData = ref([]);
const listDetail = ref([]);
// 搜索表单
const searchForm = reactive({
  train_number: "",
  train_carriage_number: "",
  fault_type: "",
  type: "appearance"
});
const dataLoading = ref(true);

const getList = async () => {
  const { currentPage, pageSize } = pagination.value;
  const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
  const { data } = await res
  console.log(data, 'getList_data')
  listData.value = data.data;
  getDetail(listData.value[0].id)
  console.log(data.list);
  pagination.value = {
    ...pagination.value,
    total: data.total
  };
  dataLoading.value = false;
};

const getDetail = async (id: any) => {
    const res = await getAppearanceMonitorDetailApi({ id, current:1,})
    const { data } = await res
    console.log(data, 'getDetail_data')
    listDetail.value = data.data;
    console.log(data.data);
}

// 查询方法
const handleQuery = () => {
  getList()
};

// 重置方法
const handleReset = () => {
  searchForm.trainNo = '';
  // deviceId.value = '';
  getList()
};

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',
  '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");
};
const currentRowIndex = ref(-1);
// 定义行类名方法
const handleRowClassName = ({ row }) => {
  return row.train_number === currentRowIndex.value ? 'selected-row' : '';
};

// 行点击事件处理
const handleRowClick = (row, event, rowIndex) => {
  currentRowIndex.value = row.train_number;
  getDetail(row.id)
};

onMounted(() => {
  getList();
});
// // 窗口大小改变时更新 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>