feat:综合概览-防汛预案动态读取数据

src/api/floodPreventionPlan.js

@@ -28,4 +28,11 @@ export function toDelete(data){
     url: '/api/sddnWeiHe/floodPreventionPlan/del/'+data.id,
     method: 'DELETE'
   })
+}
+
+export function convertPptToImagesByPlanId(data){
+    return request({
+    url: '/api/sddnWeiHe/floodPreventionPlan/convertPptToImagesByPlanId/'+data.id,
+    method: 'get'
+  })
 }

src/views/components/layerList/index.vue

@@ -27,6 +27,7 @@
 
 <script>
 import * as mars3d from 'mars3d'
+import { getFloodPreventionList } from '@/api/floodPreventionPlan'
 import { getPwkPopup, getSitePopup } from './popup'
 let layerCache = {}
 let graphicsLayer = null
@@ -112,6 +113,7 @@ export default {
   },
   created() {
     this.mainMenu = this.$route.params.menu
+    this.getFloodPlanList()
   },
   mounted() {
     this.$globalEventBus.$on('toggleLeftPanel', (val) => {
@@ -156,7 +158,7 @@ export default {
       // ================== 选中 ==================
       if (isChecked) {
         if (node.type === 'plan') {
-          this.$globalEventBus.$emit('showPlanDialog', { list: this.checkedNodes })
+          this.$globalEventBus.$emit('showPlanDialog',{ list: this.checkedNodes })
           return
         }
         if (node.type === 'monitor') {
@@ -223,7 +225,16 @@ export default {
         }
       }
     },
-
+    getFloodPlanList() {
+      getFloodPreventionList().then((res) => {
+        const newItems = res.data.records.map((item)=>({...item,type:"plan",label:item.planName}))
+        this.treeData.forEach((item)=>{
+          if(item.id == '4'){
+            item.children = newItems
+          }
+        })
+      })
+    },
     // 批量删除叶子节点
     removeAllLeafLayers(children) {
       for (const child of children) {

src/views/components/layerList/planDialog.vue

@@ -5,18 +5,20 @@
       <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">
-        <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)">
+      <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">
+          <template 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 class="fullscreen-btn" @click="openFullscreen(index)">
                   <img src="@/assets/image/smart-early-warning/fullScreen.png" alt="" />
                 </div> -->
-              </div>
-            </el-carousel-item>
-          </el-carousel>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </template>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -24,6 +26,7 @@
 </template>
 
 <script>
+import { convertPptToImagesByPlanId } from '@/api/floodPreventionPlan'
 export default {
   data() {
     return {
@@ -31,48 +34,45 @@ export default {
       planList: [],
       imgsOne: [],
       imgsTwo: [],
-      imgsThree: []
+      imgsThree: [],
+      imageList: [],
+      loading: false
     }
   },
-  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
     })
   },
-  computed: {
-    planItems() {
-      return this.planList.map((item) => {
-        if (item.id === '4-1') {
-          return { ...item, imageList: this.imgsTwo }
-        } else if (item.id === '4-2') {
-          return { ...item, imageList: this.imgsOne }
-        } else if (item.id == '4-3') {
-          return { ...item, imageList: this.imgsThree }
-        }
-        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))
+    convertPptToImagesByPlanId(id) {
+      convertPptToImagesByPlanId({ id: id }).then((res) => {
+        this.loading = false
+        this.imageList = res.data
+      })
     },
     openFullscreen(index) {
       const img = this.$el.querySelectorAll('.main-image')[index].querySelector('img')
       img.click()
     },
-    closeDialog(){
+    tabClick(d) {
+      const index = d.index
+      const p = this.planList.find((item, i) => i == index)
+      this.convertPptToImagesByPlanId(p.id)
+    },
+    closeDialog() {
       this.visible = false
-      this.$globalEventBus.$emit('closePlanDialog',this.planList)
+      this.$globalEventBus.$emit('closePlanDialog', this.planList)
+    }
+  },
+  watch: {
+    activeTab(val) {
+      this.convertPptToImagesByPlanId(val)
     }
   },
   destroyed() {
@@ -133,6 +133,10 @@ export default {
     :deep(.el-carousel__container) {
       height: px-to-rem(563);
     }
+    .main-image {
+      width: 100%;
+      height: 100%;
+    }
   }
   .fullscreen-btn {
     position: absolute;
@@ -152,4 +156,4 @@ export default {
     transform: scale(1.1);
   }
 }
-</style>
+</style>

src/views/comprehensive-overview/right.vue

@@ -36,11 +36,11 @@
               <div class="dottTitle">事件总数</div>
               <div class="data-info">
                 <div class="left">
-                  <div class="val">{{ eventInfo.total }}</div>
+                  <div class="val">{{ eventInfo?.total }}</div>
                   <img src="@/assets/image/comprehensive/midBg2.png" />
                 </div>
                 <div class="right">
-                  <div class="em" v-for="(item, index) in eventInfo.list" :key="index">
+                  <div class="em" v-for="(item, index) in eventInfo?.list" :key="index">
                     <div :class="`color${index + 1}`">{{ item.name }}</div>
                     <div>{{ item.num }}</div>
                   </div>

src/views/flood-prevention-plan/index.vue

@@ -222,15 +222,30 @@ export default {
       window.URL.revokeObjectURL(url)
       this.$message.success('文件下载成功')
     },
-    handleDelete() {
+    handleDelete(row) {
       this.$confirm('是否删除防汛预案？', '警告', {
         distinguishCancelAndClose: true,
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         confirmButtonClass: 'primaryBtn'
       })
-        .then(() => {})
-        .catch((action) => {})
+        .then(() => {
+          toDelete({ id: row.id }).then((res) => {
+            if (res.data) {
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              })
+              this.fetchData()
+            } else {
+              this.$message({
+                message: '删除失败',
+                type: 'error'
+              })
+            }
+          })
+        })
+        .catch(() => {})
     },
     handleSizeChange(val) {
       this.searchForm.pageSize = val