Skip to content

A
amap-line-edit
Commit 9f2cc5eb authored by aoobao's avatar aoobao
Browse files
Options

fix 合并页面

parent bd9f1393
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 118 deletions
public/index.html
View file @ 9f2cc5eb
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>amap-line-edit</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=c81eeaf774b25626ffb1b32e13acbd99&plugin=AMap.CustomLayer"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=c81eeaf774b25626ffb1b32e13acbd99&plugin=AMap.CustomLayer,AMap.MouseTool"></script>
</head>
<body>
<noscript>
......
src/components/DrawLine.vue 0 → 100644
View file @ 9f2cc5eb
<script>
// 线段编辑
export default {
render () { return null },
props: {
draw: {
type: Boolean,
default: false
}
},
mounted () {
if (this.draw) {
this.initDraw()
}
},
beforeDestroy () {
if (this.draw) this.destory()
},
methods: {
initDraw () {
},
destory () {
}
},
watch: {
draw (val, oldval) {
if (val != oldval) {
if (val) {
this.initDraw()
} else {
this.destory()
}
}
}
}
}
</script>
src/components/TransferDialog.vue
View file @ 9f2cc5eb
<template>
<el-dialog title="合并线段" width="840px" :visible="visible" :center="false" :before-close="handleClose">
<div class="context">
<div class="select-container">
<span class="title">待合并线段</span>
<el-button style="margin-left:10px;" @click="addLine(item,index)" v-for="(item,index) in chooseList" :key="item.key">{{item.label}}</el-button>
</div>
<div class="image-container" :style="getImageStyle()">
<!-- <img v-if="base64" :src="base64" alt=""> -->
</div>
<div style="clear :both;"></div>
<span class="title">需合并线段</span>
<div class="choose-model">
<el-tag style="margin-left:10px;" v-for="(item,index) in data" :key="item.key" closable @close="tagClose(item,index)">{{item.label}}</el-tag>
</div>
</div>
<span slot="footer" class="dialog-footer ">
<el-button type="primary " @click="submit ">确 定</el-button>
<el-button type="primary " @click="createImage ">生成图片</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
dataList: Array,
base64: String
},
data () {
return {
visible: false,
data: []
}
},
computed: {
chooseList () {
let list = this.dataList.filter(t => {
let m = this.data.find(a => a.key == t.key)
return !m
})
return list
}
},
methods: {
handleClose () {
this.visible = false
this.$emit('close')
},
show () {
this.visible = true
},
submit () {
this.$emit('merge', {
data: this.data
})
this.visible = false
},
createImage () {
this.$emit('createImage', {
data: this.data
})
},
addLine (data) {
this.data.push(data)
},
tagClose (item, index) {
this.data.splice(index, 1)
},
getImageStyle () {
return {
backgroundImage: `url('${this.base64}')`
}
}
},
watch: {
visible (val) {
if (!val) {
this.data = []
}
}
}
}
</script>
<style lang="scss" scoped>
.select-container {
width: 50%;
height: 200px;
background-color: aqua;
text-align: left;
float: left;
}
.image-container {
width: 50%;
height: 200px;
float: left;
//overflow: auto;
// background-size: contain;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.title {
text-align: left;
}
.choose-model {
text-align: left;
}
</style>
<template>
<el-dialog title="合并线段" width="840px" :visible="visible" :center="false" :before-close="handleClose">
<div class="context">
<div class="select-container">
<span class="title">待合并线段</span>
<el-button style="margin-left:10px;" @click="addLine(item,index)" v-for="(item,index) in chooseList" :key="item.key">{{item.label}}</el-button>
</div>
<div class="image-container" :style="getImageStyle()">
<!-- <img v-if="base64" :src="base64" alt=""> -->
</div>
<div style="clear :both;"></div>
<span class="title">需合并线段</span>
<div class="choose-model">
<el-tag style="margin-left:10px;" v-for="(item,index) in data" :key="item.key" closable @close="tagClose(item,index)">{{item.label}}</el-tag>
</div>
</div>
<span slot="footer" class="dialog-footer ">
<el-button type="primary " @click="submit ">确 定</el-button>
<el-button type="primary " @click="createImage ">生成图片</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
dataList: Array,
base64: String
},
data () {
return {
visible: false,
data: []
}
},
computed: {
chooseList () {
let list = this.dataList.filter(t => {
let m = this.data.find(a => a.key == t.key)
return !m
})
return list
}
},
methods: {
handleClose () {
this.visible = false
this.$emit('close')
},
show () {
this.visible = true
},
submit () {
this.$emit('merge', {
data: this.data
})
this.visible = false
},
createImage () {
this.$emit('createImage', {
data: this.data
})
},
addLine (data) {
this.data.push(data)
},
tagClose (item, index) {
this.data.splice(index, 1)
},
getImageStyle () {
return {
backgroundImage: `url('${this.base64}')`
}
}
},
watch: {
visible (val) {
if (!val) {
this.data = []
}
}
}
}
</script>
<style lang="scss" scoped>
.select-container {
width: 50%;
min-height: 200px;
background-color: aqua;
text-align: left;
float: left;
}
.image-container {
width: 50%;
height: 200px;
float: left;
//overflow: auto;
// background-size: contain;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.title {
text-align: left;
}
.choose-model {
text-align: left;
}
</style>
src/views/Home.vue
View file @ 9f2cc5eb
......@@ -3,15 +3,16 @@
<div class="map-container" @mousemove="mapMouseMove" @mouseout="mapMouseOut">
<div class="map" ref="map"></div>
<LineManagerView v-if="map" :map="map" :data="lineList" ref="lineManager" :status="status" :x="x" :y="y" :clearWidth="clearNumber" />
<DrawLine :draw="isDrawLine" @createLine="createLine" />
</div>
<div class="control">
<div class="button-control">
<label>{{statusName}}</label>
<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>
<el-button v-if="!exportVisible && !isDrawLine && statusName === '查看'" style="margin-left:5px;" type="primary" @click="showAdd">新增</el-button>
<el-button v-if="!exportVisible && !isDrawLine" style="margin-left:5px;" type="warning" @click="clearModel">{{statusName == '擦除' ? '取消擦除' : '擦除'}}</el-button>
<el-button v-if="!exportVisible && !isDrawLine && statusName === '查看'" 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 == '查看'">
......@@ -37,6 +38,7 @@
let __id = 0
// import HANG_ZHOU from '../assets/HANGZHOU'
// import SHAO_XING from '../assets/SHAOXING'
import DrawLine from '@/components/DrawLine'
import AddDialog from '@/components/AddDialog'
import RemarkDialog from '@/components/RemarkDialog'
import TransferDialog from '@/components/TransferDialog'
......@@ -54,7 +56,8 @@ export default {
LineManagerView,
TransferDialog,
RemarkDialog,
ExportDialog
ExportDialog,
DrawLine
},
data () {
return {
......@@ -68,7 +71,8 @@ export default {
mergeList: [],
remark: null,
imgBase64: null,
exportVisible: false
exportVisible: false,
isDrawLine: false
}
},
computed: {
......@@ -117,6 +121,9 @@ export default {
},
methods: {
createLine (line) {
console.log(line)
},
copyLine (lineObj) {
let line = lineObj.line
let st = LineToString(line)
......
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