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
-        v-for="(x, index) in TripMapList"
-        ::key="x.Id"
-        class="row-aic"
-        style="margin-right: 10px;"
-      >
-        <el-select
-          class="w100"
-          size="mini"
-          placeholder="选择国家"
-          v-model="x.MId"
-          @change="SearchCity(x.MId, x, index)"
-          filterable
+    <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"
+          class="row-aic"
+          style="margin-right: 10px;"
         >
-          <el-option
-            v-for="(item, i) in x.NationList"
-            :label="item.Name"
-            :value="item.ID"
-            :key="i"
-          ></el-option>
-        </el-select>
-        <!-- class="Ht_hotelSelect" -->
-        <el-select
-          style="min-width: 300px;max-width: 600px;margin-left: 5px;margin-right: 5px;"
-          size="mini"
-          placeholder="选择城市"
-          v-model="x.CityListIds"
-          multiple
-          filterable
-          @change="getCityListIds(x, index)"
-        >
-          <el-option
-            v-for="(item, i) in x.CityListAll"
-            :label="item.Name"
-            :value="item.ID"
-            :key="item.ID"
+          <el-select
+            class="w100"
+            size="mini"
+            placeholder="选择国家"
+            v-model="x.MId"
+            @change="SearchCity(x.MId, x, index)"
+            filterable
+          >
+            <el-option
+              v-for="(item, i) in x.NationList"
+              :label="item.Name"
+              :value="item.ID"
+              :key="i"
+            ></el-option>
+          </el-select>
+          <!-- class="Ht_hotelSelect" -->
+          <el-select
+            style="min-width: 300px;max-width: 600px;margin-left: 5px;margin-right: 5px;"
+            size="mini"
+            placeholder="选择城市"
+            v-model="x.CityListIds"
+            multiple
+            filterable
+            @change="getCityListIds(x, index)"
           >
-          </el-option>
-        </el-select>
-        <el-color-picker
-          style="vertical-align: middle;"
-          v-model="x.ColorStr"
-          @change="getColorStr"
-        ></el-color-picker>
-        <div style="margin-left: 5px; font-size: 23px;cursor: pointer;">
-          <i
-            v-if="index == 0"
-            class="el-icon-circle-plus"
-            style="color: #E95252;"
-            @click="alterCity(x, index, 1)"
-          ></i>
-          <i
-            v-if="index != 0"
-            class="el-icon-delete-solid"
-            style="color: gray;"
-            @click="alterCity(x, index, 0)"
-          ></i>
+            <el-option
+              v-for="(item, i) in x.CityListAll"
+              :label="item.Name"
+              :value="item.ID"
+              :key="item.ID"
+            >
+            </el-option>
+          </el-select>
+          <el-color-picker
+            style="vertical-align: middle;"
+            v-model="x.ColorStr"
+            @change="getColorStr"
+          ></el-color-picker>
+          <div style="margin-left: 5px; font-size: 23px;cursor: pointer;">
+            <i
+              v-if="index == 0"
+              class="el-icon-circle-plus"
+              style="color: #E95252;"
+              @click="alterCity(x, index, 1)"
+            ></i>
+            <i
+              v-if="index != 0"
+              class="el-icon-delete-solid"
+              style="color: gray;"
+              @click="alterCity(x, index, 0)"
+            ></i>
+          </div>
+          </div>
+        </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>
       </div>
-      <div
-        @click="getResultImg"
-        class="row-aic"
-        style="cursor: pointer;color: #E95252;"
-      >
-        <span>生成图片</span>
-      </div>
-    </div>
-    <div
-      class="relative marginT20"
-      style="border: 1px solid #e6e6e6;height:500px"
-    >
-      <div id="trip_map" class="map"></div>
     </div>
+
+    <div id="trip_map" class="map"></div>
   </div>
 </template>
 <script>
@@ -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>