修改区域新增和地图选点页面

ebike-operate/src/views/Urban/OperateRegion/index.vue

@@ -421,9 +421,10 @@ const feeConfigInfo = (record) => {
  * 费用配置modal确定
  */
 const handleOkFeeModal = () => {
-  isOkButtonDisabled.value = true;
+  // isOkButtonDisabled.value = true;
   formModel.value.formSave((data => {
-    isOkButtonDisabled.value = false;
+    console.log(data)
+    // isOkButtonDisabled.value = false;
     open.value = false;
     if (data['code'] == 200) {
       getData()

ebike-operate/src/views/Urban/OperateRegion/operateRegionMap.vue

@@ -10,8 +10,7 @@
             :afterClose="handleClose"
         >
             <div class="button-panel">
-                <a-button type="primary" @click="onEditorChange">{{ buttonName }}</a-button>
+                <a-button type="primary" @click="onEditorClear">{{ buttonName }}</a-button>
-                <a-button type="primary" @click="onEditorClear">清除</a-button>
                 <a-button type="primary" @click="onEditorComplete">完成</a-button>
             </div>
             <div class="map-container" style="width: auto; height: auto;">
@@ -27,16 +26,12 @@
                     <tlbs-geometry-editor
                         ref="editorRef"
                         action-mode="draw"
-                        :polygon-styles="styles.polygon"
-                        polygon-drawing-style-id="drawing"
-                        polygon-selected-style-id="selected"
-                        :circle-styles="styles.circle"
-                        circle-drawing-style-id="drawing"
-                        circle-selected-style-id="selected"
                         selectable
                         @draw_complete="onDrowComplet"
-                        @adjust_complete="onAdjustComplete"
                         @draw_error="onDrawError"
+                        @adjust_complete="onAdjustComplete"
+                        @adjust_error="onAdjustError"
+                        @delete_complete="onDeleteComplete"
                     />
                 </tlbs-map>
             </div>
@@ -68,21 +63,24 @@
     };
     const handleClose = () => {
         open.value = false;
+        ClearEditor();
         if (props.onCallBack) {
-            props.onCallBack("");
+            props.onCallBack(formData.value);
         }
     };
     defineExpose({ showModal });
 
     const formData = ref({
+        "regionId": "",
+        "regionName": "",
+        "simpleName": "",
+        "zoneId": "",
         "points": [],
         "shapeType": 2, // 1:圆形 2:多边形
-        "regionId": "",
         "radius": 0, // 圆形半径
     });
 
     let timer = null;
-    let shapeId = null;
     const loadMap = (dataRegion) => {
         if (editorRef.value) {
             clearTimeout(timer);
@@ -93,14 +91,32 @@
                         message.error(res.message)
                         return
                     }
-                    const { points, shapeType, radius } = res.data;
+                    const { regionName, simpleName, zoneId, points, shapeType, radius } = res.data;
                     formData.value = {
+                        "regionId": regionId,
+                        "regionName": regionName,
+                        "simpleName": simpleName,
+                        "zoneId": zoneId,
                         "points": points,
                         "shapeType": shapeType, // 1:圆形 2:多边形
-                        "regionId": regionId,
                         "radius": radius, // 圆形半径	
                     }
-                    let shapeId = 'polygon' + regionId;
+                    loadGeometry();
+                });	
+            }
+        }
+        else
+        {
+            timer = setTimeout(() => {
+                loadMap(dataRegion);
+            }, 1000)
+        }
+    };
+
+    let shapeId = null;
+    const loadGeometry = () => {
+        const { points, shapeType, regionId, radius } = formData.value;
+        shapeId = 'polygon' + regionId;
         if (shapeType == 1) {
             shapeId = 'circle' + regionId;
         }
@@ -138,7 +154,7 @@
                 const polygonGeometries = [];//editorRef.value.polygon.getGeometries();
                 polygonGeometries.push({
                     id: shapeId, // 多边形图形数据的标志信息
-                                styleId: 'fill', // 样式id
+                    styleId: 'polygon', // 样式id
                     paths, // 多边形的位置信息
                     properties: {
                         // 多边形的属性数据
@@ -155,55 +171,17 @@
                     padding: 100, // 设置地图边界的内边距
                 });
             }
-                        console.log('editorRef', editorRef.value)
+            buttonName.value = '重置';
-                        buttonName.value = '重新选择区域';
             editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
             editorRef.value.editor.select([shapeId]);
         }
-                });	
     }
-        }
-        else
-        {
-            timer = setTimeout(() => {
-                loadMap(dataRegion);
-            }, 1000)
-        }
-    };
 
     const mapRef = ref(null);
     const center = ref({ lat: 30.633158, lng: 103.974997 });
     const control = ref({ scale: {}, zoom: { position: 'topRight',},});
     const options = ref({ renderOptions: { renderOptions: true, }});
     const editorRef = ref(null);
-    const styles =ref({
-        polygon: {
-            drawing:{
-                color: 'rgba(233,233,233,0.8)', // 面填充色
-                showBorder: false, // 是否显示拔起面的边线
-                borderColor: 'rgba(233,233,233,1)', // 边线颜色
-            },
-            selected: {
-                color: 'rgba(41,91,255,0.16)', // 选中时的填充色
-                showBorder: true, // 是否显示拔起面的边线
-                borderColor: 'rgba(41,91,255,1)', // 边线颜色
-            }
-        },
-        circle: {
-            drawing: {
-            color: 'rgba(233,233,233,0.8)', // 面填充色
-            showBorder: false, // 是否显示拔起面的边线
-            borderColor: 'rgba(233,233,233,1)', // 边线颜色
-            borderWidth: 2,
-          },
-          selected: {
-            color: 'rgba(41,91,255,0.16)', // 选中时的填充色
-            showBorder: true, // 是否显示拔起面的边线
-            borderColor: 'rgba(41,91,255,1)', // 边线颜色
-            borderWidth: 2,
-          }
-        },
-    });
     const onMapInited = () => {
         if (mapRef.value) {
             const windowWidth = window.innerWidth;
@@ -218,36 +196,113 @@
         }
     };
 
-    const buttonName = ref('选择区域');
+    const buttonName = ref('清除');
-
     const onDrowComplet = (geomeytry) => {
-      console.log("onDrowComplet",geomeytry);
+      //console.log("onDrowComplet",geomeytry);
-    };
+      if(geomeytry.id){
-    const onAdjustComplete = (geomeytry) => {
+        editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
-      console.log("onAdjustComplete",geomeytry);
+        editorRef.value.editor.select([geomeytry.id]);
+      }
     };
     const onDrawError = (e) => {
-      console.log("onDrawError",e);
+        ClearEditor();
+        editorRef.value.editor.stop();
     };
     
-    const onEditorChange = () => {
+    const onAdjustComplete = (geomeytry) => {
+      //console.log("onAdjustComplete",geomeytry);
+    };
+    const onAdjustError = (e) => {
+        ClearEditor();
+        loadGeometry();
+    };
+
+    const onEditorClear = () => {
         if(!isNullOrEmpty(shapeId)){
+            loadGeometry();
+        }
+        else
+        {
+            ClearEditor();
+        }
+    }
+
+    const ClearEditor = () => {
+        editorRef.value.editor.select([]);
         editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
-            editorRef.value.editor.remove([shapeId]);
+    	editorRef.value.circle.setGeometries([]);
-            shapeId = null;
+        editorRef.value.polygon.setGeometries([]);
+    }
+
+    const onEditorComplete = () => {
+    	if(editorRef.value.editor.getSelectedList().length > 0){
+            const selectedList = editorRef.value.editor.getSelectedList();
+            const geometry = selectedList[0];
+            console.log("onEditorComplete",geometry);
+            if(geometry.id){
+                if(geometry.radius && geometry.center){
+                    formData.value.radius = geometry.radius;
+                    formData.value.points = [
+                        {
+                            "latitude": geometry.center.lat,
+                            "longitude": geometry.center.lng,
+                        }
+                    ];
+                    formData.value.shapeType = 1;
+                }
+                else if(geometry.paths){
+                    formData.value.radius = 0;
+                    formData.value.points = geometry.paths.map((point) => {
+                        return {
+                            "latitude": point.lat,
+                            "longitude": point.lng,
+                        };
+                    });
+                    formData.value.points.push({
+                        "latitude": geometry.paths[0].lat,
+                        "longitude": geometry.paths[0].lng,
+                    });
+                    formData.value.shapeType = 2;
+                }
+                if(!isNullOrEmpty(formData.value.regionId)){
+                    callOperate("/ebikeRegion/updateOperation", formData.value, "post").then((res) => {
+                        if (res.code == 200) {
+                            message.success(res.message, 3, handleClose);
+                        } else {
+                            message.error(res.message, 10);
+                        }
+                    });
+                }
+                else
+                {
+                    handleClose();
+                }
+            }
+        }
+        else
+        {
+            message.error("请先绘制区域！")
+        }
+    }
+
+    const onDeleteComplete = (geomeytry) => {
+      if(editorRef.value.polygon.getGeometries().length > 0){
+        const shapeId = editorRef.value.polygon.getGeometries()[0].id;
+        editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
+        editorRef.value.editor.select([shapeId]);
+      }
+      else if(editorRef.value.circle.getGeometries().length > 0){
+        const shapeId = editorRef.value.circle.getGeometries()[0].id;
+        editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
+        editorRef.value.editor.select([shapeId]);
       }
       else
       {
         editorRef.value.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
+    	// editorRef.value.circle.setGeometries([]);
+        // editorRef.value.polygon.setGeometries([]);
       }
-    }
+    };
-    const onEditorClear = () => {
-        console.log("onEditorClear",editorRef.value.editor.getOverlayList());
-    }
-
-    const onEditorComplete = () => {
-    	console.log("onEditorOver",editorRef.value.editor.getOverlayList());
-    }
 </script>
 
 <style>
@@ -273,7 +328,7 @@
     right: 35px;
     z-index: 2000;
     width: 300px;
-    height: 180px;
+    height: 105px;
     background-color: rgb(255, 255, 255, 0.8);
     padding: 15px;
   }

ebike-operate/src/views/Urban/OperateRegionAdd/index.vue

@@ -1,11 +1,5 @@
 <template>
   <div>
-    <a-button
-      type="primary"
-      @click="goBack"
-    >
-      返回
-    </a-button>
     <div style="display: flex;justify-content: center;">
       <a-steps
         style="margin-top: 20px;width: 80%;"
@@ -36,6 +30,18 @@
         style="margin-left: 8px"
         @click="prev"
       >上一步</a-button>
+      <a-button
+        v-if="current == 2"
+        style="margin-left: 8px"
+        @click="prev"
+      >完成</a-button>
+      <a-button
+        type="default"
+        style="margin-left: 8px"
+        @click="goBack"
+      >
+        返回
+      </a-button>
     </div>
   </div>
 </template>
@@ -73,15 +79,14 @@ const items = steps.value.map(item => ({ key: item.title, title: item.title }));
 const next = () => {
   switch (current.value) {
     case 0:
-      formModelOperateAdd.value.formSave((res => {
+      formModelOperateAdd.value.formSave((bres, data) => {
-        debugger
+        if(bres) current.value++;
-      }))
+      });
       break;
     case 1: break;
     case 2: break;
     default: break
   }
-  current.value++;
 };
 const prev = () => {
   current.value--;

ebike-operate/src/views/form/operateregion/OperateAddForm.vue

@@ -9,27 +9,6 @@
       :wrapper-col="{ span:14}"
       ref="formRef"
     >
-      <a-row :gutter="8">
-        <a-col :xs="24">
-          <a-form-item
-            label="地图选点"
-            required
-            name="zoneId"
-            :rules="[{ required: true, message: '请选择地图选点' }]"
-          >
-            <div style="display: flex;">
-              <a-input
-                style="width: 85%;"
-                v-model:value="form.regionName"
-                placeholder="请输入区域名称"
-                type="number"
-                :disabled="true"
-              />
-              <div style="margin-left: 20px;"> <a @click="selectMap">选择地图</a></div>
-            </div>
-          </a-form-item>
-        </a-col>
-      </a-row>
       <a-row :gutter="8">
         <a-col :xs="24">
           <a-form-item
@@ -38,13 +17,17 @@
             name="zoneId"
             :rules="[{ required: true, message: '请选择行政区划' }]"
           >
+            <a-input
+              style="display: none;"
+              v-model:value="form.zoneId"
+            />
             <a-cascader
               style="width: 85%;"
-              v-model:value="value"
+              :options="zoneOptions"
-              :options="options"
+              :load-data="loadZoneData"
-              :load-data="loadData"
               change-on-select
               placeholder="请选择行政区划"
+              @change="changeZone"
             />
           </a-form-item>
         </a-col>
@@ -66,7 +49,7 @@
         </a-col>
 
       </a-row>
-      <a-row :gutter="8">
+      <!-- <a-row :gutter="8">
         <a-col :xs="24">
           <a-form-item
             label="区域代码"
@@ -81,7 +64,7 @@
             />
           </a-form-item>
         </a-col>
-      </a-row>
+      </a-row> -->
       <a-row :gutter="8">
         <a-col :xs="24">
           <a-form-item
@@ -96,6 +79,24 @@
           </a-form-item>
         </a-col>
       </a-row>
+      <a-row :gutter="8">
+        <a-col :xs="24">
+          <a-form-item
+            label="区域电子围栏"
+            required
+            name="points"
+            :rules="[{ required: true, message: '请选择区域电子围栏' }]"
+          >
+            <div style="display: flex;">
+              <a-input
+                style="display: none;"
+                v-model:value="form.points"
+              />
+              <div style="margin-left: 20px;"> <a @click="selectMap">编辑地图</a></div>
+            </div>
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-spin>
   <operateRegionMap
@@ -109,6 +110,7 @@
 import { ref, defineProps, onMounted } from 'vue'
 import operateRegionMap from '../../Urban/OperateRegion/operateRegionMap.vue'
 import { callOperate } from '@/apis/call.js'
+import { message } from 'ant-design-vue'
 
 
 const props = defineProps({
@@ -119,32 +121,24 @@ const props = defineProps({
 });
 
 const formRef = ref();
-const formRefCity = ref();
-const open = ref(false);
 const spinning = ref(false);
 const tipContent = ref("加载中...");
 const editORMapModel = ref(null);
 const openORMapTitle = ref("");
-const options = ref([])
+
+const zoneOptions = ref([])
 
 
 const form = ref({
-  isOperate: "1",
+  regionId: "",
-  operateType: "1",
+  regionName: "",
-  outageNotice: "",
+  simpleName: "",
-  accessChannel: "",
+  zoneId: "",
-  operateTimeBytime: "",
+  points: [],
-  operateTimeByWeek: []
+  shapeType: 2,
+  radius: 0
 });
 
-const formCity = ref({
-  isOperate: "1",
-  operateType: "1",
-  outageNotice: "",
-  accessChannel: "",
-  operateTimeBytime: "",
-  operateTimeByWeek: []
-});
 
 onMounted(() => {
   callOperate("/ebikeOperateSystem/ebikeAdministrationZone", {}, "get").then(res => {
@@ -153,53 +147,84 @@ onMounted(() => {
       res.data.map(item => {
         opt.push({ label: item['name'], value: item['id'], isLeaf: item['isLeaf'] })
       })
-      options.value = opt;
+      zoneOptions.value = opt;
     }
   })
 })
 
-const loadData = (data) => {
+const loadZoneData = (data) => {
   if (data) {
-    callOperate("/ebikeOperateSystem/ebikeAdministrationZone?parent_id=" + data[0].value, {}, "get").then(res => {
+    let pindex = 0;
+    let parentId = data[0].value;
+    if (data.length > 0) {
+      pindex = data.length - 1;
+      parentId = data[pindex].value; 
+    }
+    callOperate("/ebikeOperateSystem/ebikeAdministrationZone?parent_id=" + parentId, {}, "get").then(res => {
       if (res.code == 200) {
         let opt = []
         res.data.map(item => {
           opt.push({ label: item['name'], value: item['id'], isLeaf: item['isLeaf'] })
         })
-        const index = options.value.findIndex(item => item['value'] == data[0].value);
+        setZoneData(zoneOptions.value,'value', parentId,'children',opt);
-        options.value[index]['children'] = opt;
       }
     })
   }
 }
 
-const selectMap = () => {
+const setZoneData = (arr,keyname,keyvalue,name,value) => {
-  openORMapTitle.value = '地图选点';
+  arr.map(item => {
-  editORMapModel.value.showModal();
+    if (item[keyname] == keyvalue) {
+      item[name] = value;
+    }
+    if (item['children']) {
+      setZoneData(item['children'],keyname,keyvalue,name,value)
+    }
+  })
 }
-const handleOkModal = () => {
 
+const changeZone = (data) => {
+  if (data.length > 0) {
+    form.value.zoneId = data[data.length - 1];
+  } else {
+    form.value.zoneId = "";
+  }
+}
+
+const selectMap = () => {
+  openORMapTitle.value = '绘制地图';
+  editORMapModel.value.showModal();
 }
 
 const onORMapCallBack = (data) => {
-  debugger
+  const { points, shapeType, radius } = data;
+  form.value.points = points;
+  form.value.shapeType = shapeType;
+  form.value.radius = radius;
 }
 
 const formSave = (callBack) => {
   formRef.value.validate().then(() => {
     tipContent.value = "保存中..."
     spinning.value = true;
-    const param = _.cloneDeep(form.value)
+    callOperate("/ebikeRegion/saveOperation", form.value).then(res => {
-    callOperate("/ebikeRegion/saveOperation", param).then(res => {
       spinning.value = false;
+      if (res.code != 200) {
+        message.error(res.message);
         if (callBack) {
-        res.data = param;
+          callBack(false, res);
-        callBack(res);
-        formRef.value.resetFields()
         }
+        return;
+      }
+      if (callBack) {
+        callBack(true, res);
+      }
+      formRef.value.resetFields()
     })
   }).catch(error => {
-    console.log('error', error);
+    if (callBack) {
+        callBack(false, error);
+      }
   });
 };
 

ebike-operate/vite.config.js

@@ -29,7 +29,7 @@ export default defineConfig({
         proxy: {
             '^/operate/*': {
                 changeOrigin: true,
-                target: 'http://192.168.2.151:10010/',
+                target: 'http://192.168.2.156:10010/',
                 rewrite: (path) => {
                     return path.replace(/^\/operate/, 'operate')
                 }
@@ -43,7 +43,7 @@ export default defineConfig({
             },
             '^/maintenance/*': {
                 changeOrigin: true,
-                target: 'http://192.168.2.151:10010/',
+                target: 'http://192.168.2.156:10010/',
                 rewrite: (path) => {
                     return path.replace(/^\/maintenance/, 'maintenance')
                 }
@@ -57,7 +57,7 @@ export default defineConfig({
             },
             '^/user/*': {
                 changeOrigin: true,
-                target: 'http://192.168.2.151:10010/',
+                target: 'http://192.168.2.156:10010/',
                 rewrite: (path) => {
                     return path.replace(/^\/user/, 'user')
                 }