t

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

@@ -5,14 +5,18 @@
       :show-close="false"
       :close-on-click-modal="false"
       :visible.sync="isShow"
-      :title="mteStr === 'polygonAdd' ? '多边形操作' : '文字操作'"
+      :title="mteStr === 'polygonAdd' || mteStr === 'polylineAdd' ? '多边形或折线操作' : '文字操作'"
       :fullscreen="false"
       width="400px"
       custom-class="xl-dialog"
       center
     >
-      <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="110px">
+      <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="70px">
       </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>
       <div class="xl-form">
         <div class="xl-form-footer">
           <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
@@ -39,11 +43,21 @@ export default {
       formData: [],
       fillColor: '#DC3021',
       strokeColor: '#DC3021',
+      colorArr: [
+        {color: '#fb6557'}, 
+        {color: '#ff9149'}, 
+        {color: '#9f7df4'}, 
+        {color: '#60c68b'}, 
+        {color: '#4da4ee'}, 
+        {color: '#e77ad4'}
+      ],
+      cObj: {},
     }
   },
   watch: {
     isShow: function(val) {
       if (val) {
+        this.cObj = JSON.parse(JSON.stringify(this.curObj))
         this.getDef()
       }
     },
@@ -51,8 +65,14 @@ export default {
   methods: {
     getDef (str) {
       let params = { ...this.curObj.obj }
+      if (str === 'color') {
+        const oldform = this.$refs.ruleForm.baseForm
+        params = {...oldform}
+        params.fillColor = this.fillColor
+        params.strokeColor = this.strokeColor
+      }
       if (!params.text) params.text = '标题示例'
-      if (this.mteStr === 'polygonAdd') {
+      if (this.mteStr === 'polygonAdd' || this.mteStr === 'polylineAdd') {
         if (!params.fillColor) {
           params.fillColor = this.fillColor
           params.fillOpacity = '0.4'
@@ -69,12 +89,17 @@ export default {
           params.color = '#fff'
         }
         this.formData = [
-          { label: '文字内容', key: 'text', rules: 1},
-          { label: '文字颜色', key: 'color', type: 'colorPicker', rules: 1},
+          { label: '内容', key: 'text', rules: 1},
+          { label: '颜色', key: 'color', type: 'colorPicker', rules: 1},
         ]
       }
       this.setDefaultValue(params)
     },
+    colorHandle (item) {
+      this.fillColor = item.color
+      this.strokeColor = item.color
+      this.getDef('color')
+    },
     close (str) {
       if (str === 'confirm') {
         this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
@@ -108,4 +133,22 @@ export default {
     height: 300px;
   }
 }
+
+.scoped-color-quick {
+  margin-bottom: 20px;
+  .t {
+    color: #313131;
+  }
+  .op {
+    display: inline-block;
+    vertical-align: middle;
+    width: 40px;
+    height: 26px;
+    line-height: 26px;
+    color: #fff;
+    cursor: pointer;
+    text-align: center;
+    margin-right: 10px;
+  }
+}
 </style>

src/views/map/dtl.vue

@@ -84,6 +84,19 @@
         :extData="{index}"
         :events="polygonEvents">
       </el-amap-polygon>
+      <el-amap-polyline
+        v-for="(polyline, index) in polylines"
+        :key="index"
+        :editable="polyline.editable"
+        :fillColor="polyline.fillColor"
+        :fillOpacity="polyline.fillOpacity"
+        :strokeColor="polyline.strokeColor"
+        :strokeWeight="polyline.strokeWeight"
+        :strokeOpacity="polyline.strokeOpacity"
+        :extData="{index}"
+        :events="polylineEvents"
+        :path="polyline.path">
+      </el-amap-polyline>
     </el-amap>
   </div>
 </template>
@@ -97,6 +110,7 @@ export default {
   data() {
     const that = this
     return {
+      polylines: [],
       estateList: [],
       schoolList: [],
       medium_school_list: [],
@@ -191,6 +205,12 @@ export default {
           // wx.miniProgram.navigateTo({url: '/pagesSchool/indexDtl?id=25'})
         },
       },
+      polylineEvents: {
+        click(e) {
+          const eData = e.target.getExtData()
+          that.polylineIndex = eData.index
+        },
+      },
       estateEvents: {
         click(e) {
           const eData = e.target.getExtData()
@@ -210,6 +230,7 @@ export default {
         },
       },
       polygonIndex: 0,
+      polylineIndex: 0,
       curMarkersIndex: 0,
       plugin: [{
         pName: 'MouseTool',
@@ -437,15 +458,21 @@ export default {
 
 
         let areaList = res.area_total || []
-        areaList.map(item => {
+        let newAreaList = []
+        areaList.forEach(item => {
           // let lnglatArr = arrToObj(this.dictData.map_area_lnglat)[item.area_type].split(',')
           // item.position = [lnglatArr[0], lnglatArr[1]]
           // item.areaName = arrToObj(this.dictData.area_type)[item.area_type]
           const areaIndex = arrToObj(arr)[item.area_type]
-          item.position = [arr[areaIndex].longitude, arr[areaIndex].latitude]
-          item.areaName = arr[areaIndex].areaName
+          if (arr[areaIndex] && arr[areaIndex].longitude) {
+            newAreaList.push({
+              ...item,
+              position: [arr[areaIndex].longitude, arr[areaIndex].latitude],
+              areaName: arr[areaIndex].areaName
+            })
+          }
         })
-        this.areaList = [...areaList]
+        this.areaList = [...newAreaList]
       })
     })
   },
@@ -471,6 +498,7 @@ export default {
       }).then(res => {
         if (res.data) {
           const data = JSON.parse(res.data)
+          this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
           this.polygons = [...data.polygons]
           this.markerData = [...data.markerData]
           this.mapDiyObj = {
@@ -491,8 +519,10 @@ export default {
           }
         }
         document.title = res.title || '洪楼地图1'
+        // this.getDef()
       })
     },
+    
   }
 }
 </script>
@@ -515,7 +545,7 @@ export default {
   text-align: center;
   padding: 6px 10px;
   border-radius: 6px;
-  background: #ebad57;
+  background: #369af7;
 }
 
 .scoped-select-center {
@@ -532,12 +562,13 @@ export default {
   }
 }
 
+
 ::v-deep .amap-marker-label {
   border-color: #dcdcdc;
   border-radius: 2px;
   padding: 3px 5px;
   color: #666;
-  background: #f0f0f0;
+  background: #fff;
   box-shadow: 0 0 3px #ccc;
 }
 ::v-deep .amap-logo{
@@ -547,8 +578,8 @@ export default {
   opacity:0;
 }
 ::v-deep .amap-icon img {
-  width: 20px !important;
-  height: 20px !important;
+  width: 11px !important;
+  height: 11px !important;
 }
 
 .scoped-marker-area {
@@ -560,7 +591,7 @@ export default {
   text-align: center;
   font-size: 12px;
   border-radius: 50%;
-  padding-top: 16px;
+  padding-top: 20px;
   box-sizing: border-box;
 }
 

src/views/map/list.vue

@@ -12,6 +12,7 @@
       :page-size="pageSize"
       :total-records="totalRecords"
       @currentChange="pageHandle"
+      @sizeChange="sizeChange"
       :isAdd="true"
       @add="openPopup"
     />
@@ -52,7 +53,8 @@ export default {
       const arr = [...this.tableData]
       arr.map(item => {
         if (
-            item.uuid === '954a527b-e460-4b67-bd39-7adcfa3c2def'   // 默认
+            item.uuid === '96512a54-4d3c-457e-a33f-3ea27c963bd0' // 区域
+            || item.uuid === '954a527b-e460-4b67-bd39-7adcfa3c2def'   // 默认
             || item.uuid === '95542ff1-8176-4267-8344-2aa7f1034ac5' // 初中
             || item.uuid === '95542fdc-b542-4582-9be2-9ab8005728d3' // 小学
           ) {