页面修改

src/components/newTravelmanager/TravelGroupControl/tripmap.vue

 <template>
-  <div class="tripmap-form marginT20" v-if="PostConfig">
-    <div class="tripmap-Search" v-loading="pageLoading">
+  <div class="tripmap-form marginT20" v-if="PostConfig" v-loading="pageLoading">
+    <div class="tripmap-Search">
       <div style="display: flex;align-items: start; justify-content: space-between;">
         <div style="display: flex;flex-wrap: wrap; flex-grow: 1;">
           <div v-for="(x, index) in TripMapList" :key="index" class="row-aic">
@@ -26,7 +26,7 @@
         </div>
         <div class="row-aic" style="flex-shrink: 0;">
           <el-button type="danger" key="BtnClose" @click="CloseMapBox">关闭</el-button>
-          <el-button type="primary" key="BtnCreateImg" :disabled="setLoading" @click="getResultImg()">{{btnStr}}
+          <el-button type="primary" key="BtnCreateImg" :loading="saveLoading" @click="saveLoading=true">{{btnStr}}
           </el-button>
         </div>
       </div>
@@ -49,7 +49,7 @@
     props: ["PostConfig"],
     data() {
       return {
-        setLoading: false,
+        saveLoading: false,
         pageLoading: false,
         SourceCountryList: [], //所有国家列表
         SourceCityList: [], //国家下面的城市列表
@@ -125,6 +125,15 @@
         },
         deep: true,
         immediate: true
+      },
+      saveLoading: {
+        handler(val, oldVal) {
+          if (val) {
+            setTimeout(() => {
+              this.getResultImg();
+            }, 1000)
+          }
+        },
       }
     },
     created() {
@@ -245,7 +254,7 @@
         this.clearCountriesMaker();
         //遍历有经纬度的城市
         var tempData = [];
-        var that = this;        
+        var that = this;
         this.citiesData.forEach(cItem => {
           if (cItem.longitude && cItem.latitude) {
             tempData.push(cItem);
@@ -740,15 +749,16 @@
       // 导出地图片
       getResultImg() {
         this.btnStr = "生成中..";
-        this.setLoading = true;
+        this.saveLoading = true;
         this.pageLoading = true;
-        let that = this;
         var postJson = {
           ConfigId: this.PostConfig.ID
         };
-
+        let that = this;
         var trip_map_obj = document.getElementById("trip_map");
-        html2Canvas(trip_map_obj).then(function (canvas) {
+        html2Canvas(trip_map_obj, {
+          backgroundColor: null,
+        }).then(function (canvas) {
           var image = document.createElement("a");
           image.href = canvas.toDataURL("image/png");
           let blob = that.base64ToBlob(image.href);
@@ -759,17 +769,17 @@
             that.pageLoading = false;
             that.btnStr = "生成图片";
             if (x.data.StatusCode == 1) {
-              that.setLoading = false;
+              that.saveLoading = false;
               let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
               that.PostConfig.Mapurl = allPath;
               //调用父页面保存方法
               that.PostConfig.TripMapList = JSON.parse(JSON.stringify(that.TripMapList));
               that.$emit('saveMsg');
             } else {
-              that.setLoading = false;
+              that.saveLoading = false;
             }
           });
-        });
+        })
       },
     }
   };