Skip to content

A
amap-line-edit
Commit 896d6e72 authored by aoobao's avatar aoobao
Browse files
Options

批量导入

parent 41723c7b
Show whitespace changes
Inline Side-by-side
Showing with 137 additions and 31 deletions
src/assets/LineManager.js
View file @ 896d6e72
......@@ -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 0 → 100644
View file @ 896d6e72
<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
View file @ 896d6e72
<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
View file @ 896d6e72
......@@ -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
View file @ 896d6e72
......@@ -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'
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment