feat: 外观检测接口联调

src/views/dashboard/components/AppearanceAlarmModal.vue

@@ -20,14 +20,14 @@
                     <span class="appearanceAlarm-content-top-title">故障前</span>
                     <div class="appearanceAlarm-content-top-left-img">
                         <div class="appearanceAlarm-content-top-img">
-                            <img :src="beforeImage[0]?.image_url" alt=""></img>
+                            <img :src="imageBefore" alt=""></img>
                         </div>
                         <div class="appearanceAlarm-content-top-img-slider">
                             <swiper ref="swiperModalRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
                                 :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
                                 @swiper="onSwiper" @slideChange="onSlideChange">
-                                <swiper-slide v-for="(file, index) in beforeImage" :key="index" @click="handleSlideClick(index)"
-                                :class="{ 'active-slide': activeIndex === index }">
+                                <swiper-slide v-for="(file, index) in beforeImage" :key="index" @click="handleSlideClick(index, 'before')"
+                                :class="{ 'active-slide': activeBeforeIndex === index }">
                                 <img :src="file.image_url" class="cursor-pointer" v-if="file.image_url" />
                                 </swiper-slide>
                             </swiper>
@@ -38,14 +38,14 @@
                     <span class="appearanceAlarm-content-top-title">故障后</span>
                     <div class="appearanceAlarm-content-top-right-img">
                         <div class="appearanceAlarm-content-top-img">
-                            <img :src="image[0]?.image_url" alt=""></img>
+                            <img :src="imageAfter" alt=""></img>
                         </div>
                         <div class="appearanceAlarm-content-top-img-slider">
                             <swiper ref="swiperModalRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
                                 :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
                                 @swiper="onSwiper" @slideChange="onSlideChange">
-                                <swiper-slide v-for="(file, index) in image" :key="index" @click="handleSlideClick(index)"
-                                :class="{ 'active-slide': activeIndex === index }">
+                                <swiper-slide v-for="(file, index) in image" :key="index" @click="handleSlideClick(index, 'after')"
+                                :class="{ 'active-slide': activeAfterIndex === index }">
                                 <img :src="file.image_url" class="cursor-pointer" v-if="file.image_url" />
                                 </swiper-slide>
                             </swiper>
@@ -82,7 +82,6 @@ import { Navigation, Scrollbar } from "swiper/modules";
 import "swiper/css";
 import 'swiper/scss';
 import 'swiper/scss/navigation';
-import { it } from 'element-plus/es/locale';
 
 interface Props {
     /** 弹窗显隐 */
@@ -103,12 +102,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 const modules = [Navigation, Scrollbar];
-const activeIndex = ref(-1);
+const activeBeforeIndex = ref(-1);
+const activeAfterIndex = ref(-1);
 const swiperModalRef = ref(null);
+const imageBefore = ref('');
+const imageAfter = ref('');
 const loading = ref(true);
 // 处理对话框关闭事件
 const handleClose = () => {
     // emits('close');
+    activeBeforeIndex.value = -1;
+    activeAfterIndex.value = -1;
+    // imageBefore.value = '';
+    // imageAfter.value = '';
 };
 
 const show = computed({
@@ -127,8 +133,15 @@ const onSwiper = (swiper) => {
 const onSlideChange = () => {
   console.log("slide change");
 };
-const handleSlideClick = (index) => {
-    activeIndex.value = index;
+const handleSlideClick = (index:any, type:any) => {
+    if(type === 'before') {
+        activeBeforeIndex.value = index;
+        imageBefore.value = props.beforeImage[index]?.image_url;
+    } else if(type === 'after') {
+        activeAfterIndex.value = index;
+        imageAfter.value = props.image[index]?.image_url;
+    }
+
 };
 
 // 导出 Excel 文件
@@ -191,6 +204,9 @@ const exportToExcel = async () => {
 onMounted(() => {
     // 主图延迟加载
     setTimeout(() => {
+        console.log(show.value);
+        imageBefore.value = props.beforeImage[0]?.image_url;
+        imageAfter.value = props.image[0]?.image_url;
         loading.value = false;
     }, 2000); // 延迟 2 秒
 });