编辑和地图

src/api/task/index.js

@@ -42,14 +42,14 @@ export const getTaskPilot = () => request({
 })
 
 /**
- * 添加任务
+ * 编辑任务
  * @param {*} params
  * @returns 
  */
- export const taskEdit = params => request({
+ export const taskEdit = data => request({
   url: '/task/edit',
   method: 'PUT',
-  params
+  data
 })
 
 /**
@@ -67,8 +67,8 @@ export const getTaskPilot = () => request({
  * @param {*} params
  * @returns 
  */
- export const distributionPilot = params => request({
+ export const distributionPilot = data => request({
   url: '/task/distributionPilot',
   method: 'PUT',
-  params
+  data
 })

src/utils/map/GMap.js

@@ -0,0 +1,11 @@
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+export default AMapLoader.load({
+  "key": "20535a30fa0f3aae9c7bbe4407270792",
+  "version": "2.0",
+  "plugins": ['AMap.ToolBar', 'AMap.AutoComplete', "AMap.PlaceSearch", 'AMap.Geocoder'],
+  AMapUI: {
+    version: '1.1',
+    plugins: ['overlay/SimpleMarker'],
+  }
+})

src/utils/map/README.md

@@ -0,0 +1,49 @@
+
+```js
+import GMap from '@/utils/map/GMap'
+
+GMap.then((AMap) => {
+  let map = new AMap.Map('mapComp', {
+    zoom: 13,
+    center: [118.773319, 31.828123],
+  });
+
+  // 根据经纬度 反查详细地址
+  const geocoder = new AMap.Geocoder()
+  geocoder.getAddress([116.396574, 39.992706], function(status, result) {
+    if (status === 'complete' && result.info === 'OK') {
+      console.log('result', result);
+    }
+  })
+
+  // 添加缩放工具
+  const toolbar = new AMap.ToolBar();
+  map.addControl(toolbar);
+
+  // 搜索
+  AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
+
+    const poiPicker = new PoiPicker({
+      input: 'pickerInput'
+    });
+
+    poiPicker.on('poiPicked', ({ item }) => {
+
+      let inp = document.getElementById('pickerInput');
+      inp.value = item.name;
+
+      const marker = new AMap.Marker({
+        title: item.address
+      });
+
+      marker.setMap(map);
+      marker.setPosition(item.location);
+      map.setCenter(marker.getPosition());
+
+    })
+  });
+
+}).catch(e => console.log(e))
+
+
+```

src/views/task-manage/components/MapComp.vue

@@ -5,19 +5,11 @@
 </template>
 
 <script setup name="mapComp">
-import AMapLoader from '@amap/amap-jsapi-loader';
+import GMap from '@/utils/map/GMap'
 
 const emit = defineEmits(['mapEmit'])
 
-AMapLoader.load({
-  "key": "20535a30fa0f3aae9c7bbe4407270792",
-  "version": "2.0",
-  "plugins": ['AMap.ToolBar', 'AMap.AutoComplete', "AMap.PlaceSearch"],
-  AMapUI: {
-    version: '1.1',
-    plugins: ['overlay/SimpleMarker'],
-  }
-}).then((AMap) => {
+GMap.then((AMap) => {
   let map = new AMap.Map('mapComp', {
     zoom: 13,
     center: [118.773319, 31.828123],
@@ -27,6 +19,7 @@ AMapLoader.load({
   const toolbar = new AMap.ToolBar();
   map.addControl(toolbar);
 
+  // 搜索
   AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
 
     const poiPicker = new PoiPicker({
@@ -50,7 +43,7 @@ AMapLoader.load({
 
     })
   });
-
+  
 }).catch(e => console.log(e))
 
 </script>

src/views/task-manage/components/UserModal.vue

@@ -32,8 +32,8 @@
               </template>
             </n-input>
 
-            <n-date-picker v-if="item.type === 'datetime'" v-model:formatted-value="userForm[item.key]" v-bind="item.props"
-              type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
+            <n-date-picker v-if="item.type === 'datetime'" v-model:formatted-value="userForm[item.key]"
+              v-bind="item.props" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
             <n-radio-group v-if="item.type === 'radio'" v-model:value="userForm[item.key]" :name="item.key">
               <n-space>
                 <n-radio v-for="(cItem,cIndex) in item.options" :key="`${item.key}_${cIndex}`" :value="cItem.value"> {{
@@ -48,13 +48,13 @@
 
 
   <n-modal v-model:show="showStart" :mask-closable="false" preset="dialog" title="" positive-text="确定"
-    @positive-click="userForm.patrolLocation = startVal.name" @negative-click="showStart = false">
-    <map-comp @mapEmit="startVal = $event"></map-comp>
+    @positive-click="userForm.patrolLocation = startVal" @negative-click="showStart = false">
+    <map-comp @mapEmit="startHandle"></map-comp>
   </n-modal>
 
   <n-modal v-model:show="showEnd" :mask-closable="false" preset="dialog" title="" positive-text="确定"
-    @positive-click="userForm.endValue = endVal.name" @negative-click="showEnd = false">
-    <map-comp @mapEmit="endVal = $event"></map-comp>
+    @positive-click="userForm.endValue = endVal" @negative-click="showEnd = false">
+    <map-comp @mapEmit="endHandle"></map-comp>
   </n-modal>
 
 </template>
@@ -64,11 +64,11 @@ import { form, getPilotList, getEquipment, getEquipmentMount } from '../tools/fo
 import { defineComponent, ref, reactive, computed, toRefs, unref } from 'vue'
 import Modal from '@/components/Modal/index.vue'
 import UploadOss from '@/components/UploadOss/index.vue'
-// import { addUser, editUser } from '@/api/system/user/index'
-import { taskAdd } from '@/api/task'
+import { taskAdd, taskEdit } from '@/api/task'
 import { LocationSharp } from '@vicons/ionicons5'
-import AMapLoader from '@amap/amap-jsapi-loader'
+// import AMapLoader from '@amap/amap-jsapi-loader'
 import MapComp from './MapComp.vue'
+import GMap from '@/utils/map/GMap'
 
 export default defineComponent({
   name: 'UserModal',
@@ -132,16 +132,48 @@ export default defineComponent({
       data.userForm.imageStatus = status
     }
 
+    let geocoder = null;
     // 地图
-    AMapLoader.load({
-      "key": "20535a30fa0f3aae9c7bbe4407270792",
-      "version": "2.0",
-      "plugins": ['AMap.ToolBar']
-    }).then((AMap) => {
-      let Gmap = new AMap.Map('mapContainer', {
-        zoom: 13,
-        center: [118.773319, 31.828123],
-      });
+    GMap.then((AMap) => {
+      let Gmap = null;
+      
+      // 坐标求地址
+      geocoder = new AMap.Geocoder()
+
+      if(props.type == 'update') {  // 打开编辑
+        Gmap = new AMap.Map('mapContainer', {
+          zoom: 13,
+          center: [data.userForm.startLongitude, data.userForm.startLatitude],
+        });
+
+        var marker = new AMap.Marker({
+          position: new AMap.LngLat(data.userForm.startLongitude, data.userForm.startLatitude),
+          icon: '//vdata.amap.com/icons/b18/1/2.png',
+          title: '起点'
+        });
+
+        // 将创建的点标记添加到已有的地图实例：
+        Gmap.add(marker);
+        
+        // 起点赋值
+        geocoder.getAddress([data.userForm.startLongitude, data.userForm.startLatitude], (status, result) => {
+          if (status === 'complete' && result.info === 'OK') {
+            data.userForm.patrolLocation = result.regeocode.formattedAddress
+          }
+        })
+
+        // 终点赋值
+        geocoder.getAddress([data.userForm.endLongitude, data.userForm.endLatitude], (status, result) => {
+          if (status === 'complete' && result.info === 'OK') {
+            data.userForm.endValue = result.regeocode.formattedAddress
+          }
+        })
+      } else {
+        Gmap = new AMap.Map('mapContainer', {
+          zoom: 13,
+          center: [118.773319, 31.828123],
+        });
+      }
 
       // 添加缩放工具
       const toolbar = new AMap.ToolBar();
@@ -156,32 +188,59 @@ export default defineComponent({
     const startVal = ref(null);
     const endVal = ref(null);
 
+    // 起点地图 确定事件
+    const startHandle = e => {
+      const { location: { lat } } = e;
+      const { location: { lng } } = e;
+      geocoder.getAddress([lng, lat], function (status, result) {
+        if (status === 'complete' && result.info === 'OK') {
+          startVal.value = result.regeocode.formattedAddress
+          data.userForm.startLongitude = String(lng);
+          data.userForm.startLatitude = String(lat);
+        }
+      })
+    }
+    // 终点地图 确定事件
+    const endHandle = e => {
+      const { location: { lat } } = e;
+      const { location: { lng } } = e;
+      geocoder.getAddress([lng, lat], function (status, result) {
+        if (status === 'complete' && result.info === 'OK') {
+          endVal.value = result.regeocode.formattedAddress
+          data.userForm.endLongitude = String(lng);
+          data.userForm.endLatitude = String(lat);
+        }
+      })
+    }
+
     function handleConfirm() {
+
       formRef.value?.validate(async (errors) => {
         if (!errors) {
-
-          const start = unref(startVal);
-          const end = unref(endVal);
           let params = {
             ...data.userForm,
-            taskStartTime: String(data.userForm.taskStartTime),
-            startLatitude: String(start.location.lat),
-            startLongitude: String(start.location.lng),
-            endLongitude: String(end.location.lat),
-            endLatitude: String(end.location.lng),
-          
+            taskStartTime: String(data.userForm.taskStartTime)
           }
 
-          try {
-            const { code } = await taskAdd(params);
-            if (code === 0) {
-              emit('reload')
-              handleClose()
-            }
-          } catch (error) {
-            console.log(error);
+          if (params.taskCode) {
+            /* 编辑 */
+            taskEdit(params)
+              .then(res => {
+                if (res.code === 0) {
+                  emit('reload')
+                  handleClose()
+                }
+              })
+          } else {
+            /* 新增 */
+            taskAdd(params)
+              .then(res => {
+                if (res.code === 0) {
+                  emit('reload')
+                  handleClose()
+                }
+              })
           }
-
         } else {
           $message.error('请完善必填信息')
         }
@@ -204,7 +263,9 @@ export default defineComponent({
       showStart,
       showEnd,
       startVal,
-      endVal
+      endVal,
+      startHandle,
+      endHandle
     }
   }
 })

src/views/task-manage/tools/table.js

@@ -33,10 +33,12 @@ async function getRowData(row, type) {
  * @description: 编辑
  * @return {*}
  */
-function handlePasswordReset(id) {
-  data.rowData = row
-  data.modalType = type
-  data.modalShow = true
+function editHandle(row, type) {
+  getTaskInfo(row.id).then(res => {
+    data.rowData = res.data
+    data.modalType = type
+    data.modalShow = true
+  })
 }
 
 /**
@@ -124,7 +126,7 @@ const data = reactive({
               props: {
                 type: 'primary',
                 text: true,
-                onPositiveClick: handlePasswordReset.bind(null, row.id)
+                onClick: editHandle.bind(null, row, 'update')
               },
               auth: 'basic_list'
             },