t

src/views/map/components/popup/MapTextEdit.vue

@@ -15,9 +15,9 @@
       </base-form>
       <div class="scoped-color-quick" v-if="mteStr === 'polygonAdd' || mteStr === 'polylineAdd'">
         <div class="t">快速选择颜色</div>
-        <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{fillColor === item.color ? '已选' : ' '}}</div>
+        <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{item.t}}</div>
         <div style="padding-top: 10px;">
-          <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr2" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{fillColor === item.color ? '已选' : ' '}}</div>
+          <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr2" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{item.t}}</div>
         </div>
       </div>
       <div class="xl-form">
@@ -51,15 +51,16 @@ export default {
         {color: '#ff9149'}, 
         {color: '#9f7df4'}, 
         {color: '#60c68b'}, 
-        {color: '#4da4ee'}, 
+        // {color: '#4da4ee'}, 
         {color: '#e77ad4'}
       ],
       colorArr2: [
-        {color: '#ff0'}, 
-        {color: '#ff7fbf'}, 
-        {color: '#ff003f'}, 
-        {color: '#007299'}, 
-        {color: '#00ff3f'}, 
+        {color: '#ff0', t: '住宅'}, 
+        {color: '#ff7fbf', t: '教育'}, 
+        {color: '#ff003f', t: '商业'}, 
+        {color: '#007299', t: '公共'}, 
+        {color: '#00ff3f', t: '公园'}, 
+        {color: '#4da4ee', t: '医院'}, 
       ],
       cObj: {},
     }
@@ -161,6 +162,13 @@ export default {
     cursor: pointer;
     text-align: center;
     margin-right: 10px;
+    opacity: .6;
+    color: #000;
+    user-select: none;
+    &.cur {
+      opacity: 1;
+      color: #fff;
+    }
   }
 }
 </style>

src/views/map/dtl.vue

@@ -166,7 +166,8 @@
         :events="polylineEvents"
         :path="polyline.path">
       </el-amap-polyline>
-      <el-amap-info-window :position="winObj.position" :content="winObj.content"></el-amap-info-window>
+      <!-- closeWhenClickMap="true"  -->
+      <el-amap-info-window :isCustom="true" :position="winObj.position" :content="winObj.content"></el-amap-info-window>
     </el-amap>
     <MapTextEdit
       :isShow="isMteShow"
@@ -292,11 +293,26 @@ export default {
           const eData = e.target.getExtData()
           that.polygonIndex = eData.index
           const lnglatObj = e.lnglat
+          const cObj = that.polygons[that.polygonIndex]
+          const typeObj = {
+            '#ff0': '住宅用地',
+            '#ff7fbf': '教育用地',
+            '#ff003f': '商业用地',
+            '#007299': '公用设施',
+            '#00ff3f': '公园用地',
+            '#4da4ee': '医院用地',
+          }
           that.winObj.position = [lnglatObj.lng, lnglatObj.lat]
           that.winObj.content = `
-            <div style="font-weight: bold;color:#409eff;padding: 10px 10px 2px">${that.polygons[that.polygonIndex].text}</div>
-            <div style="text-align: center;color:#999;">序号:${that.polygonIndex + 1}</div>
+          <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
+            <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: center;">${cObj.text}</div>
+            <div style="padding: 0 10px 10px;color: #999;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
+            <div style="padding: 0 10px 10px;color: #999;">状态：${cObj.strokeStyle === 'dashed' ? '规划中' : '已规划'}</div>
+          </div>
           `
+          // <div style="font-weight: bold;color:${that.polygons[that.polygonIndex].fillColor};padding: 10px 10px;background:#fff;border-radius: 6px;user-select: none;">${that.polygons[that.polygonIndex].text}</div>
+          // <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:${that.polygons[that.polygonIndex].fillColor};border-radius: 6px;user-select: none;">${that.polygons[that.polygonIndex].text}</div>
+            // <div style="text-align: center;color:#999;">序号:${that.polygonIndex + 1}</div>
           // wx.miniProgram.navigateTo({url: '/pagesSchool/indexDtl?id=25'})
         },
       },
@@ -647,7 +663,9 @@ export default {
         if (res.data) {
           const data = JSON.parse(res.data)
           this.winObj = {
-            content: data.mapDiyObj.title,
+            content: `
+            <div style="font-weight: bold;color:#409eff;padding: 10px 10px;background:#fff;border-radius: 6px;user-select: none;">${data.mapDiyObj.title}</div>
+            `,
             position: [data.mapDiyObj.center[0], data.mapDiyObj.center[1]],
           }
           this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []