暂存

src/views/init-speed-track/index.vue

@@ -18,27 +18,35 @@
           </div>
         </template>
         <div class="track-line">
+          <el-button v-if="trackList.length > 0" type="primary" size="small" @click="onSubmit" style="color: white">保存</el-button>
           <template v-for="(item, index) in trackList">
             <div class="line">
-              <div class="label" :style="`color: ${SourceMap.get(item.type).color};`">{{SourceMap.get(item.type).label}}</div>
+              <div class="label" :style="`color: ${SourceMap.get(item.type).color};`">{{item.ID}}、{{SourceMap.get(item.type).label}}</div>
               <el-tooltip :enterable="false" placement="top" content="隐藏" v-if="item.show">
                 <img class="__hover" src="./ship-track-visible.svg" @click="handleShow(false, item)"/>
               </el-tooltip>
               <el-tooltip :enterable="false" placement="top" content="显示" v-else>
                 <img class="__hover" src="./ship-track-invisible.svg" @click="handleShow(true, item)"/>
               </el-tooltip>
+              <el-tooltip :enterable="false" placement="top" content="编辑">
+                <img class="__hover" src="./edit.png" @click="handleEdit(item)"/>
+              </el-tooltip>
+              <el-tooltip :enterable="false" placement="top" content="删除">
+                <img class="__hover" src="./button-del.png" @click="handleDelete(item, index)"/>
+              </el-tooltip>
             </div>
           </template>
         </div>
       </el-card>
-      <el-card shadow="always">
+      <el-card shadow="always" v-if="isForm">
         <template #header>
           <div class="card-header">
             <span>轨迹点列表</span>
-            <el-button v-if="trackPointList.length > 0" type="primary" size="small" @click="onSubmit" style="color: white">保存</el-button>
+            <el-button v-if="trackPointList.length > 0" type="primary" size="small" @click="onTemp" style="color: white">暂存</el-button>
           </div>
         </template>
         <div class="track-point">
+          <div v-if="form.ID" class="label" :style="`color: ${SourceMap.get(form.type).color};`">{{form.ID}}、{{SourceMap.get(form.type).label}}</div>
           <template v-for="item in formParams">
             <div class="item">
               <span>{{item.label}}：</span><el-input v-model="form[item.value]" clearable/>
@@ -88,7 +96,7 @@ import { EventsKey } from 'ol/events';
 import { Coordinate } from 'ol/coordinate';
 import TrackStyle from './track-style'
 import axios from "axios";
-import {ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
 
 export default defineComponent({
   name: 'App',
@@ -110,9 +118,11 @@ export default defineComponent({
       initTrackPointEndCount: 0,
       initTrackPointList: [],
       loading: false,
-      form: {}
+      form: <any>{},
+      idNum: 1,
+      isForm: false
     });
-    formParams.forEach(v => {
+    formParams.forEach((v: { value: string | number; init: any; }) => {
       state.form[v.value] = v.init
     })
     const mapLoad = (map: null, func: null) => {
@@ -268,7 +278,54 @@ export default defineComponent({
       //   helpTooltipElement?.addClass('hidden');
       // });
     }
+    const initDraw = (pMap, type) => {
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "form-track-point-line",
+        layerZIndex: 9,
+        list: [
+          {
+            easyMapParams: {
+              id: new Date().getTime(),
+              position: that.$easyMap.formatPosition.wptTwl(state.trackPointList.map(v => that.$easyMap.formatPosition.cptTwpt(v.position))),
+              normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(type)?.color, pMap, (s, p) => {
+                state.formTrackPointStartCount++
+                setTimeout(() => {
+                  state.formTrackPointEndCount++
+                  state.formTrackPointList.push(...p)
+                  if (state.formTrackPointStartCount === state.formTrackPointEndCount) {
+                    that.$easyMap.initShape({
+                      map: state.map,
+                      layerName: 'form-track-point',
+                      layerZIndex: 10,
+                      list: state.formTrackPointList.map((v, i) => {
+                        return {
+                          easyMapParams: {
+                            id: `form-track-point-${i}`,
+                            position: that.$easyMap.formatPosition.cptTwpt(v.position),
+                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.source).color, v.speed)
+                          }
+                        }
+                      })
+                    })
+                    state.formTrackPointStartCount = 0
+                    state.formTrackPointEndCount = 0
+                    state.formTrackPointList = []
+                  }
+                }, 10)
+                return s
+              }),
+            }
+          }
+        ]
+      });
+    }
     const drawTrack = (trackSource: string) => {
+      state.isForm = false
+      state.form = {}
+      formParams.forEach((v: { value: string | number; init: any; }) => {
+        state.form[v.value] = v.init
+      })
       startDraw((evt) => {
         const geom = evt.feature.getGeometry()
         const pMap = new Map()
@@ -281,46 +338,8 @@ export default defineComponent({
           pMap.set(`${v[0]}-${v[1]}`, obj)
           return obj
         })
-        that.$easyMap.initShape({
-          map: state.map,
-          layerName: "form-track-point-line",
-          layerZIndex: 9,
-          list: [
-            {
-              easyMapParams: {
-                id: new Date().getTime(),
-                position: that.$easyMap.formatPosition.wptTwl(state.trackPointList.map(v => that.$easyMap.formatPosition.cptTwpt(v.position))),
-                normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(trackSource)?.color, pMap, (s, p) => {
-                  state.formTrackPointStartCount++
-                  setTimeout(() => {
-                    state.formTrackPointEndCount++
-                    state.formTrackPointList.push(...p)
-                    if (state.formTrackPointStartCount === state.formTrackPointEndCount) {
-                      that.$easyMap.initShape({
-                        map: state.map,
-                        layerName: 'form-track-point',
-                        layerZIndex: 10,
-                        list: state.formTrackPointList.map((v, i) => {
-                            return {
-                                easyMapParams: {
-                                    id: `form-track-point-${i}`,
-                                    position: that.$easyMap.formatPosition.cptTwpt(v.position),
-                                    normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.source).color, v.speed)
-                                }
-                            }
-                        })
-                      })
-                      state.formTrackPointStartCount = 0
-                      state.formTrackPointEndCount = 0
-                      state.formTrackPointList = []
-                    }
-                  }, 10)
-                  return s
-                }),
-              }
-            }
-          ]
-        });
+        initDraw(pMap, trackSource)
+        state.isForm = true
       })
     }
     const onPointFocus = (p1: any, p2: any, p3: any) => {
@@ -358,46 +377,50 @@ export default defineComponent({
         ]
       });
     }
-    const onSubmit = () => {
-      const obj = {
-        type: state.trackPointList[0].source,
-        lines: state.trackPointList.map(v => {
-          return {
-            lon: v.position[0],
-            lat: v.position[1],
-            speed: v.speed
-          }
-        })
-      }
-      Object.assign(obj, state.form)
-      const result = JSON.parse(JSON.stringify(obj))
-      console.log(result)
-      state.loading = true
-      axios.post("/init-speed-track-api/hujie-track-server/mock", [result], {
-        contentType: "application/json"
-      }).then(res => {
-        console.log(res)
-        if (res.status === 200 && res.data) {
-          ElMessage.success('添加成功！')
-          state.trackList.push(Object.assign(result, {show: false, ID: new Date().getTime()}))
-          state.trackPointList = []
-          that.$easyMap.initShape({
-            map: state.map,
-            layerName: "form-track-point-line",
-            layerZIndex: 9,
-            list: []
-          });
-          that.$easyMap.initShape({
-            map: state.map,
-            layerName: "form-track-point",
-            layerZIndex: 10,
-            list: []
-          });
-        } else {
-          ElMessage.error('添加失败！')
+    const onTemp = () => {
+      let index = 0
+      if (state.trackList.some((v: { ID: any; }, i: number) => {
+        index = i
+        return v.ID === state.form.ID
+      })) {
+        state.trackList[index] = Object.assign(state.form, {show: true, lines: state.trackPointList.map(v => {
+            return {
+              lon: v.position[0],
+              lat: v.position[1],
+              speed: v.speed
+            }
+          })})
+      } else {
+        const obj = {
+          type: state.trackPointList[0].source,
+          lines: state.trackPointList.map(v => {
+            return {
+              lon: v.position[0],
+              lat: v.position[1],
+              speed: v.speed
+            }
+          })
         }
-        state.loading = false
-      })
+        Object.assign(obj, state.form)
+        const result = JSON.parse(JSON.stringify(obj))
+        state.trackList.push(Object.assign(result, {show: true, ID: state.idNum.toString()}))
+      }
+      state.idNum++
+      state.trackPointList = []
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "form-track-point-line",
+        layerZIndex: 9,
+        list: []
+      });
+      that.$easyMap.initShape({
+        map: state.map,
+        layerName: "form-track-point",
+        layerZIndex: 10,
+        list: []
+      });
+      initTrack()
+      state.isForm = false
     }
     const trackShowListCom = computed(() => {
       return state.trackList.filter((v: { show: any; }) => v.show)
@@ -471,15 +494,89 @@ export default defineComponent({
       item.show = show
       initTrack()
     }
+    const handleEdit = (item: any) => {
+      item.show = false
+      state.form = item
+      const pMap = new Map()
+      state.trackPointList = state.form.lines.map((v: { speed: any; lon: any; lat: any; }) => {
+        const obj = {
+          source: state.form.type,
+          position: [v.lon, v.lat],
+          speed: v.speed
+        }
+        pMap.set(`${v.lon}-${v.lat}`, obj)
+        return obj
+      })
+      initDraw(pMap, state.form.type)
+      state.isForm = true
+      initTrack()
+    }
+    const handleDelete = (item: any, index) => {
+      ElMessageBox.confirm(`是否删除：${item.ID}、${SourceMap.get(item.type).label}？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        if (state.form.ID === item.ID) {
+          state.isForm = false
+          state.form = {}
+          formParams.forEach((v: { value: string | number; init: any; }) => {
+            state.form[v.value] = v.init
+          })
+          state.trackPointList = []
+          that.$easyMap.initShape({
+            map: state.map,
+            layerName: "form-track-point-line",
+            layerZIndex: 9,
+            list: []
+          });
+          that.$easyMap.initShape({
+            map: state.map,
+            layerName: "form-track-point",
+            layerZIndex: 10,
+            list: []
+          });
+        }
+        state.trackList.splice(index, 1)
+        initTrack()
+      }).catch(() => {})
+    }
+    const onSubmit = () => {
+      ElMessageBox.confirm(`是否保存？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "success",
+      }).then(() => {
+        state.loading = true
+        const result = JSON.parse(JSON.stringify(state.trackList)).map(v => {
+          delete v.ID
+          delete v.show
+          return v
+        })
+        axios.post("/init-speed-track-api/hujie-track-server/mock", result, {
+          contentType: "application/json"
+        }).then(res => {
+          if (res.status === 200 && res.data) {
+            ElMessage.success('保存成功！')
+          } else {
+            ElMessage.error('保存失败！')
+          }
+          state.loading = false
+        })
+      }).catch(() => {})
+    }
     return {
       ...toRefs(state),
       mapLoad,
       drawTrack,
       onPointFocus,
       SourceMap,
-      onSubmit,
+      onTemp,
       handleShow,
-      formParams
+      formParams,
+      handleEdit,
+      handleDelete,
+      onSubmit
     }
   }
 })
@@ -503,13 +600,19 @@ export default defineComponent({
       overflow-y: auto;
       max-height: 180px;
       .line {
-        height: 20px;
+        height: 22px;
         display: flex;
         align-items: center;
         .label {
-          width: 90px;
+          width: 160px;
+          white-space: nowrap;
+        }
+        img {
+          width: 16px;
+          height: 16px;
+          cursor: pointer;
+          margin-left: 6px;
         }
-
       }
     }
     .track-point {