no message

src/components/newTravelmanager/TravelGroupControl/TravelManagerThree.vue

 <style>
   @import "../../../assets/css/newTravelManager.css";
   @import "../../../assets/css/endTravelManager.css";
-
+  .mapImg-Img p{
+    text-align: center;
+    padding: 40px;
+    font-size: 18px;
+    color: #E95252;
+  }
 </style>
 <template>
   <div>
@@ -43,7 +48,24 @@
           id="thirdAnchor" @featureCallBack="getFeature" :FeatureData="FeatureData" :TeamType="TeamType"
           :isNewConfig="isNewConfig" @unlockFormCommit="unlockFormCommit" :CurrentUserInfo="CurrentUserInfo">
         </TravelFeature>
-        <Tripmap :dataAll="PostConfig" :ConfigId="ConfigId"></Tripmap>
+        <!-- 地图 -->
+        <div class="TravelPrice clearfix">
+          <div class="mapImg-buttom">
+            <span class="TMTitle"><i></i>地图</span>
+            <span class="foldList" @click="ShowMap=!ShowMap">编辑地图</span>
+          </div>
+          <div class="mapImg-Img">
+            <div v-if="PostConfig&&PostConfig.MapUrl">
+              <el-image
+                style="width: 100%; height: auto"
+                :src="PostConfig.MapUrl"
+                :preview-src-list="[PostConfig.MapUrl]">
+              </el-image>
+            </div>
+            <p v-else>地图暂未生成图</p>
+          </div>
+        </div>
+        <Tripmap v-if="ShowMap" :dataAll="PostConfig" :ConfigId="ConfigId" @Cancel="ShowMap=false" @Success="getMapImgSuccess"></Tripmap>
         <TravelNotice :class="{'showOther':TeamType==3}" ref="TravelNotice" id="fourAnchor" @headCallBack="getNotice"
           :subArray="NoticeParameters" :NoticeData="NoticeData" v-bind:PostConfig="PostConfig"
           v-bind:AllCityList="AllCityList" v-bind:CountryID="PostConfig.CountryID"></TravelNotice>
@@ -117,6 +139,7 @@
     },
     data() {
       return {
+        ShowMap: false,
         //当前登录用户信息
         CurrentUserInfo: {},
         IsShowBtn: false, //是否显示按钮
@@ -263,6 +286,10 @@
       };
     },
     methods: {
+      getMapImgSuccess(path){
+        this.PostConfig.MapUrl = path
+        this.ShowMap = false
+      },
       /*获取行程特色内容对象*/
       getFeature(featureObj) {
         this.PostFeature = featureObj;
@@ -851,6 +878,7 @@
                 this.PostConfig.TripCountryList = tempData.TripCountryList;
                 this.PostConfig.TripCitwlist = tempData.TripCitwlist;
                 this.PostConfig.TripMapList = tempData.TripMapList;
+                this.PostConfig.MapUrl = tempData.MapUrl;
                 let arrList = function(list){
                   list.forEach(x=>{
                     x.NationList = []

src/components/newTravelmanager/TravelGroupControl/tripmap.vue

 <template>
   <div class="tripmap-form marginT20" v-if="dataAll">
-    <div class="row"
-    v-loading="setLoading">
+    <div class="tripmap-Search" v-loading="setLoading">
+      <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="x.Id"
@@ -61,21 +62,20 @@
             ></i>
           </div>
           </div>
-      <div
-        @click="getResultImg"
-        class="row-aic"
-        style="cursor: pointer;color: #E95252;"
-      >
-        <span>生成图片</span>
         </div>
+        <div class="row-aic" style="flex-shrink: 0;">
+          <div>
+            <span class="MapImgButtom CancelMapImg" @click="Cancel">取消</span>
+          </div>
+          <div style="margin-left: 20px;">
+            <span class="MapImgButtom setMapImg" @click="getResultImg">生成图片</span>
           </div>
-    <div
-      class="relative marginT20"
-      style="border: 1px solid #e6e6e6;height:500px"
-    >
-      <div id="trip_map" class="map"></div>
         </div>
       </div>
+    </div>
+
+    <div id="trip_map" class="map"></div>
+  </div>
 </template>
 <script>
 import mapboxgl from "mapbox-gl";
@@ -176,7 +176,7 @@ export default {
       container: "trip_map",
       style: "mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b", // 'mapbox://styles/mapbox/light-v9','mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b'
       center: [2.177432, 41.382894],
-      zoom: 6,
+      zoom: 1,
       preserveDrawingBuffer: true
     });
     this.map.on("load", async () => {
@@ -233,16 +233,21 @@ export default {
         var path = `/Upload/Temporary`;
         that.uploadSelfBlob(path, newArr,postJson, x => {
           if(x.data.StatusCode==1){
+            that.setLoading = false
             let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
-            // console.log(allPath,'------')
+            that.dataAll.Mapurl = allPath
+            that.$emit('Success',allPath)
           }
-          that.setLoading = false
+
         })
         return
         image.download = "map.png";
         image.click();
       });
     },
+    Cancel(){
+      that.$emit('Cancel')
+    },
     // 更新数据
     async AssemblyData() {
       this.listCity.forEach((p, i) => {
@@ -700,20 +705,26 @@ export default {
 </script>
 <style>
 .tripmap-form {
-  background: #fff;
+
+}
+.tripmap-Search{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
   padding: 20px;
+  background: #f2f2f2;
 }
 #trip_map {
-  width: 100%;
-  height: 500px;
-  position: absolute;
-  /* position: fixed; */
+  /* position: absolute; */
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: #FFF;
-  /* z-index: 5000; */
+  z-index: 1000;
 }
 
 body {
@@ -765,4 +776,25 @@ body {
   border-bottom: 6px solid transparent;
   border-right: 6px solid rgba(0, 0, 0, 0.6);
 }
+.MapImgButtom{
+  width: 90px;
+    height: 28px;
+    color: #fff;
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+    float: right;
+    line-height: 28px;
+    border-radius: 16px;
+    cursor: pointer;
+}
+.CancelMapImg{
+    background-color: gray;
+}
+.setMapImg{
+    background-color: #E95252;
+}
+/deep/.setMapImg .el-button{
+  padding: 0;
+}
 </style>