批量导入

src/assets/LineManager.js

@@ -8,6 +8,9 @@
  * opt
  * color : String 线段默认颜色 '#fff'
  * pointSize : Number 点位大小 3
+ * pointColor : String 点位颜色 默认线段颜色
+ * lastPointColor : String 最后一个点的颜色 'red'
+ * lastPointSize : Number 最后一个点的大小,默认pointSize
  */
 export default class LineManager {
   constructor(map, opt) {
@@ -107,9 +110,9 @@ export default class LineManager {
 
       // 绘制最后一个点
       let pixel = pixels[pixels.length - 1] // 最后一个点
-      ctx.fillStyle = this._lastPointColor
+      ctx.fillStyle = lineObj.lastPointColor || this._lastPointColor
       ctx.beginPath()
-      ctx.arc(pixel.getX(), pixel.getY(), this._lastPointSize, 0, 2 * Math.PI)
+      ctx.arc(pixel.getX(), pixel.getY(), lineObj.lastPointSize || this._lastPointSize, 0, 2 * Math.PI)
       ctx.fill()
 
 

src/components/ExportDialog.vue

+<template>
+  <div class="export-container" v-show="visible">
+    <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
+      <el-checkbox v-for="item in lineList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
+    </el-checkbox-group>
+
+    <el-input style="margin-top:10px;" type="textarea" v-model="text" :rows="15" placeholder=""></el-input>
+  </div>
+</template>
+<script>
+import { LineToString } from '@/assets/utils'
+export default {
+  props: {
+    visible: Boolean,
+    lineList: Array
+  },
+  data () {
+    return {
+      checkList: [],
+      text: null
+    }
+  },
+  computed: {
+    checkLineList () {
+      let list = this.checkList.map(id => {
+        let obj = this.lineList.find(t => t.id == id)
+        return obj
+      })
+      return list
+    }
+  },
+  methods: {
+    handleCheckedCitiesChange () {
+      // console.log(val)
+      let list = this.checkLineList
+      let sb = ''
+      for (let i = 0; i < list.length; i++) {
+        const lineObj = list[i];
+        let st = LineToString(lineObj.line)
+        sb += '|' + st
+      }
+      if (sb.length) {
+        sb = sb.substr(1)
+      }
+      this.text = sb
+      this.$emit('exportLine', list.map(t => t.id))
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.export-container {
+  position: absolute;
+  right: 0px;
+  top: 45px;
+  width: 400px;
+  height: calc(100% - 50px);
+  background-color: #fff;
+}
+</style>

src/components/LineView.vue

 <template>
   <div class="line-container" @mouseout="mouseout" @mouseover="mouseover">
-    <span class="name">{{name}} {{startPointName}}</span>
+    <!-- <span class="name">{{name}} {{startPointName}}</span> -->
+    <div style="width:180px;margin-right:5px;" class="input-container">
+      <el-input :value="name" @input="changeName"></el-input>
+    </div>
+
     <el-button type="success" size="mini" @click="reverse">反转</el-button>
     <el-button @click="remove" type="danger" icon="el-icon-delete" size="mini" circle></el-button>
     <el-button type="primary" size="mini" @click="copyLine">导出</el-button>
@@ -30,14 +34,17 @@ export default {
       }
       return null
     },
-    startPointName () {
-      if (this.startPoint) {
-        return `${this.startPoint[0].toFixed(3)},${this.startPoint[1].toFixed(3)}...`
-      }
-      return ''
-    }
+    // startPointName () {
+    //   if (this.startPoint) {
+    //     return `${this.startPoint[0].toFixed(3)},${this.startPoint[1].toFixed(3)}...`
+    //   }
+    //   return ''
+    // }
   },
   methods: {
+    changeName (val) {
+      this.$emit('input', val)
+    },
     remove () {
       this.$emit('remove')
     },
@@ -65,7 +72,7 @@ export default {
   justify-content: flex-start;
   align-items: center;
   margin-left: 10px;
-  margin-top: 10px;
+  margin-top: 15px;
   .name {
     // color: #fff;
 

src/components/TransferDialog.vue

@@ -87,17 +87,18 @@ export default {
 <style lang="scss" scoped>
 .select-container {
   width: 50%;
-  height: 150px;
+  height: 200px;
   background-color: aqua;
   text-align: left;
   float: left;
 }
 .image-container {
   width: 50%;
-  height: 150px;
+  height: 200px;
   float: left;
   //overflow: auto;
-  background-size: contain;
+  // background-size: contain;
+  background-size: 100% 100%;
   background-repeat: no-repeat;
 }
 

src/views/Home.vue

@@ -8,13 +8,14 @@
     <div class="control">
       <div class="button-control">
         <label>{{statusName}}</label>
-        <el-button style="margin-left:15px;" type="primary" @click="showAdd">新增</el-button>
-        <el-button style="margin-left:15px;" type="warning" @click="clearModel">擦除</el-button>
-        <el-button style="margin-left:15px;" type="success" @click="merge">合并</el-button>
+        <el-button style="margin-left:5px;" type="primary" @click="showAdd">新增</el-button>
+        <el-button style="margin-left:5px;" type="warning" @click="clearModel">{{statusName == '擦除' ? '取消擦除' : '擦除'}}</el-button>
+        <el-button style="margin-left:5px;" type="success" @click="merge">合并</el-button>
+        <el-button style="margin-left:5px;" @click="exportAll">{{exportVisible ? '关闭导出' : '批量导出'}}</el-button>
       </div>
       <div class="line-control">
         <template v-if="statusName == '查看'">
-          <LineView v-for="(line,index) in lineList" :key="line.id" :data="line" @remove="removeLine(index)" @reverse="reverseLine(line,index)" @mouseout="lineMouseOut(line,index)" @mouseover="lineMouseOver(line,index)" @copyLine="copyLine(line)" />
+          <LineView v-for="(line,index) in lineList" :key="line.id" :data="line" @remove="removeLine(index)" @reverse="reverseLine(line,index)" @mouseout="lineMouseOut(line,index)" @mouseover="lineMouseOver(line,index)" @copyLine="copyLine(line)" @input="e=>line.name = e" />
         </template>
         <template v-else-if="statusName == '擦除'">
           <div class="clear-container">
@@ -28,19 +29,22 @@
     <AddDialog ref="addDialog" @add="addLine" />
     <TransferDialog ref="transferDialog" :dataList="generateData" :base64="imgBase64" @close="imgBase64 = null" @merge="mergeLine" @createImage="createImageLine" />
     <RemarkDialog ref="remarkDialog" :value="remark" @close="remark = null" />
+    <ExportDialog :visible="exportVisible" :lineList="lineList" @exportLine="exportLine" />
   </div>
 </template>
 
 <script>
 let __id = 0
-// import HANG_ZHOU from '../assets/HANGZHOU'
+import HANG_ZHOU from '../assets/HANGZHOU'
 import AddDialog from '@/components/AddDialog'
 import RemarkDialog from '@/components/RemarkDialog'
 import TransferDialog from '@/components/TransferDialog'
 import LineView from '@/components/LineView'
 import LineManagerView from '@/components/LineManager'
+import ExportDialog from '@/components/ExportDialog.vue'
 import LineManager from '@/assets/LineManager'
 import { transposePolyrect, LineToString } from '../assets/utils'
+const ACTIVE_COLOR = 'red'
 export default {
   name: 'home',
   components: {
@@ -48,7 +52,8 @@ export default {
     LineView,
     LineManagerView,
     TransferDialog,
-    RemarkDialog
+    RemarkDialog,
+    ExportDialog
   },
   data () {
     return {
@@ -61,7 +66,8 @@ export default {
       clearNumber: 20,
       mergeList: [],
       remark: null,
-      imgBase64: null
+      imgBase64: null,
+      exportVisible: false
     }
   },
   computed: {
@@ -91,13 +97,13 @@ export default {
       center: [120, 30]
     })
 
-    // // 测试代码
-    // setTimeout(() => {
-    //   this.addLine({
-    //     name: '杭州',
-    //     text: HANG_ZHOU
-    //   })
-    // }, 500);
+    // 测试代码
+    setTimeout(() => {
+      this.addLine({
+        name: '杭州',
+        text: HANG_ZHOU
+      })
+    }, 500);
 
   },
   methods: {
@@ -108,6 +114,9 @@ export default {
       this.remark = st
       this.$refs.remarkDialog.show()
     },
+    exportAll () {
+      this.exportVisible = !this.exportVisible
+    },
     // 合并
     merge () {
       if (this.status == LineManager.VIEW) {
@@ -153,9 +162,9 @@ export default {
       // console.log(list)
 
       let name = list.reduce((pre, sur) => {
-        let name = pre + ',' + sur.name
+        let name = pre + sur.name + ' '
         return name
-      }, '').substr(1);
+      }, '合: ');
 
       let mlist = list.reduce((pre, sur) => {
         return [...pre, ...sur.line]
@@ -201,16 +210,42 @@ export default {
         line: data.line.reverse()
       })
     },
+    exportLine (list) {
+      let data = this.lineList.map(lineObj => {
+        let cid = list.find(id => id == lineObj.id)
+        if (cid) {
+          return {
+            ...lineObj,
+            color: ACTIVE_COLOR,
+            lastPointColor: 'gold',
+            lastPointSize: 20
+          }
+
+        } else {
+          return {
+            ...lineObj,
+            color: 'blue',
+            lastPointColor: undefined,
+            lastPointSize: undefined
+          }
+        }
+      })
+      this.lineList = data
+    },
     lineMouseOut (data, index) {
       this.lineList.splice(index, 1, {
         ...data,
-        color: 'blue'
+        color: 'blue',
+        lastPointColor: undefined,
+        lastPointSize: undefined
       })
     },
     lineMouseOver (data, index) {
       this.lineList.splice(index, 1, {
         ...data,
-        color: 'orange'
+        color: ACTIVE_COLOR,
+        lastPointColor: 'gold',
+        lastPointSize: 20
       })
       //data.color = 'yellow'
     },