feat:ppt图片展示修改

src/views/components/layerList/planDialog.vue

@@ -5,17 +5,18 @@
       <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeDialog" />
     </div>
     <div class="plan-content">
-      <el-tabs tab-position="left" style="height: 5.85rem" @tab-click="tabClick">
-        <el-tab-pane :label="item.label" v-for="(item, index) in this.planList" :key="index">
-          <div v-loading="loading">
-            <el-carousel :ref="'mainCarousel' + index" :interval="5000" :autoplay="false" arrow="always" indicator-position="none">
-              <el-carousel-item v-for="(image, i) in imageList" :key="i">
-                <div class="image-wrapper">
-                  <el-image :src="image" :preview-src-list="imageList" fit="cover" class="main-image" />
-                </div>
-              </el-carousel-item>
-            </el-carousel>
-          </div>
+      <el-tabs tab-position="left" style="height: 5.85rem">
+        <el-tab-pane :label="item.label" v-for="(item, index) in this.planItems" :key="index">
+          <el-carousel :ref="'mainCarousel' + index" :interval="5000" :autoplay="false" arrow="always" indicator-position="none">
+            <el-carousel-item v-for="(image,i) in item.imageList" :key="i">
+              <div class="image-wrapper">
+                <el-image :src="image" :preview-src-list="item.imageList" fit="cover" class="main-image" />
+                <!-- <div class="fullscreen-btn" @click="openFullscreen(index)">
+                  <img src="@/assets/image/smart-early-warning/fullScreen.png" alt="" />
+                </div> -->
+              </div>
+            </el-carousel-item>
+          </el-carousel>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -23,7 +24,6 @@
 </template>
 
 <script>
-import { convertPptToImagesByPlanId } from '@/api/floodPreventionPlan'
 export default {
   data() {
     return {
@@ -31,45 +31,49 @@ export default {
       planList: [],
       imgsOne: [],
       imgsTwo: [],
-      imgsThree: [],
-      imageList: [],
-      loading: false
+      imgsThree: []
     }
   },
+  created() {
+    this.loadImages()
+  },
   mounted() {
     this.$globalEventBus.$on('showPlanDialog', (data) => {
       this.planList = data.list
-      if (data.list.length > 0) {
-        this.loading = true
-        this.convertPptToImagesByPlanId(data.list[0].id)
-      }
       this.visible = data.list.length > 0 ? true : false
     })
   },
-  methods: {
-    convertPptToImagesByPlanId(id) {
-      convertPptToImagesByPlanId({ id: id }).then((res) => {
-        this.loading = false
-        this.imageList = res.data
+  computed: {
+    planItems() {
+      return this.planList.map((item) => {
+        if (item.id == '12') {
+          return { ...item, imageList: this.imgsOne }
+        } else if (item.id == '13') {
+          return { ...item, imageList: this.imgsTwo }
+        } else if (item.id == '14') {
+          return { ...item, imageList: this.imgsThree }
+        }
+        console.info(item)
+        return item
       })
+    }
+  },
+  methods: {
+    loadImages() {
+      const imagesRequireContext1 = require.context('@/assets/image/planOne', false, /\.png$|\.jpg$/)
+      this.imgsOne = imagesRequireContext1.keys().map((imagePath) => imagesRequireContext1(imagePath))
+      const imagesRequireContext2 = require.context('@/assets/image/planTwo', false, /\.png$|\.jpg$/)
+      this.imgsTwo = imagesRequireContext2.keys().map((imagePath2) => imagesRequireContext2(imagePath2))
+      const imagesRequireContext3 = require.context('@/assets/image/planThree', false, /\.png$|\.jpg$/)
+      this.imgsThree = imagesRequireContext3.keys().map((imagePath3) => imagesRequireContext3(imagePath3))
     },
     openFullscreen(index) {
       const img = this.$el.querySelectorAll('.main-image')[index].querySelector('img')
       img.click()
     },
-    tabClick(d) {
-      const index = d.index
-      const p = this.planList.find((item, i) => i == index)
-      this.convertPptToImagesByPlanId(p.id)
-    },
-    closeDialog() {
+    closeDialog(){
       this.visible = false
-      this.$globalEventBus.$emit('closePlanDialog', this.planList)
-    }
-  },
-  watch: {
-    activeTab(val) {
-      this.convertPptToImagesByPlanId(val)
+      this.$globalEventBus.$emit('closePlanDialog',this.planList)
     }
   },
   destroyed() {
@@ -130,10 +134,6 @@ export default {
     :deep(.el-carousel__container) {
       height: px-to-rem(563);
     }
-    .main-image {
-      width: 100%;
-      height: 100%;
-    }
   }
   .fullscreen-btn {
     position: absolute;
@@ -153,4 +153,4 @@ export default {
     transform: scale(1.1);
   }
 }
-</style>
+</style>