<template>
|
<div>
|
<el-dialog title="修改标绘" :visible.sync="editPlotVisible" :modal="true" :close-on-click-modal="false"
|
:modal-append-to-body="true" :append-to-body="true" class="edit-plot-box">
|
<div>
|
<div class="line">
|
<div class="value-name-box">描述：</div>
|
<div class="input-width-box" style="flex: 1;">
|
<input style="width: 100%;" type="text" v-model="polygonRemark" placeholder="请输入..." />
|
</div>
|
</div>
|
|
<div class="line" v-show="customImageShow">
|
<div class="value-name-box">
|
选择图片：
|
</div>
|
<div class="select-image" style="position: relative; display: flex; align-items: center;">
|
<el-button style="margin-top: 0; position: relative; background: transparent; border-color: #fff;"
|
@click="imagesListShow = !imagesListShow">
|
<img :src="curImgUrl" alt=""
|
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;">
|
</el-button>
|
<images-select v-show="imagesListShow" @curClick="curClick"></images-select>
|
</div>
|
</div>
|
|
<div class="line">
|
<div class="value-name-box">选择标绘颜色：</div>
|
<div class="pick-color-box">
|
<el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
|
</el-color-picker>
|
</div>
|
</div>
|
|
<div class="line">
|
<div class="value-name-box">设置透明度：</div>
|
<div class="alpha">
|
<el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
|
</div>
|
</div>
|
|
<div class="btn-box">
|
<el-button @click="savePlot">保存</el-button>
|
<el-button @click="editPlot">编辑</el-button>
|
<el-button @click="deletePlot">删除</el-button>
|
<el-button @click="editPlotVisible = false">取消</el-button>
|
</div>
|
</div>
|
|
</el-dialog>
|
|
<el-dialog title="新增标绘" :visible.sync="polygonAddVisible" :modal="true" :close-on-click-modal="false"
|
:modal-append-to-body="true" :append-to-body="true" class="add-polygon-box" :before-close="cancelSavePolygon">
|
|
<div>
|
<div class="line">
|
<div class="value-name-box">描述：</div>
|
<div class="input-width-box" style="flex: 1;">
|
<input style="width: 100%;" type="text" v-model="polygonRemark" placeholder="请输入..." />
|
</div>
|
</div>
|
|
<div class="line" v-show="isNeedPolygonType">
|
<div class="value-name-box">选择类型：</div>
|
<div class="select-type">
|
<el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
|
<el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
|
:value="item.value"></el-option>
|
</el-select>
|
</div>
|
</div>
|
|
<div class="line" v-show="customImageShow">
|
<div class="value-name-box">
|
选择图片：
|
</div>
|
<div class="select-image" style="position: relative; display: flex; align-items: center;">
|
<el-button style="margin-top: 0; position: relative; background: transparent; border-color: #fff;"
|
@click="imagesListShow = !imagesListShow">
|
<img :src="curImgUrl" alt=""
|
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;">
|
</el-button>
|
<images-select v-show="imagesListShow" @curClick="curClick"></images-select>
|
</div>
|
</div>
|
|
<div class="line">
|
<div class="value-name-box">选择标绘颜色：</div>
|
<div class="pick-color-box">
|
<el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
|
</el-color-picker>
|
</div>
|
</div>
|
|
<div class="line">
|
<div class="value-name-box">设置透明度：</div>
|
<div class="alpha">
|
<el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
|
</div>
|
</div>
|
|
<div class="btn-box">
|
<el-button @click="savePolygonInfo">保存</el-button>
|
<el-button @click="cancelSavePolygon">取消</el-button>
|
</div>
|
</div>
|
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// 当前点击的标绘元素
|
let plotOverlayData = null
|
|
let polygonPlotData = ''
|
|
let polygonAltArray = []
|
|
import { deleteSecurityPlot, addSecurityPlot } from '@/api/activity/index.js'
|
|
export default {
|
inject: ['userInfo'],
|
|
props: ['showingSecurityId'],
|
|
data () {
|
return {
|
polygonName: '',
|
|
predefineColors: [
|
'#ff4500',
|
'#ff8c00',
|
'#ffd700',
|
'#90ee90',
|
'#00ced1',
|
'#1e90ff',
|
'#c71585',
|
'rgba(255, 69, 0, )',
|
'rgb(255, 120, 0)',
|
'hsv(51, 100, 98)',
|
'hsva(120, 40, 94)',
|
'hsl(181, 100%, 37%)',
|
'hsla(209, 100%, 56%)',
|
'#c7158577'
|
],
|
choosePlotColor: '#409EFF',
|
polygonRemark: '',
|
choosePlotColorAlpha: 48,
|
polygonAreaType: 1,
|
isNeedPolygonType: false,
|
editPlotVisible: false,
|
polygonAddVisible: false,
|
|
polygonAreaOption: [{
|
value: 1,
|
label: '核心区'
|
}, {
|
value: 2,
|
label: '缓冲区'
|
}],
|
plotId: '',
|
|
customImageShow: false,
|
imagesListShow: false,
|
|
curImgUrl: '/img/icon/custom.png'
|
}
|
},
|
methods: {
|
curClick (item) {
|
this.curImgUrl = item.url
|
|
this.imagesListShow = false
|
},
|
|
addPointPopupShow (type, positions) {
|
polygonAltArray = `${positions.alt},${positions.alt}`
|
polygonPlotData = `${positions.lng} ${positions.lat}`
|
this.customImageShow = false
|
let color = ''
|
|
if (type == 'icon1') {
|
this.plotSaveType = 6
|
color = '#ff0000'
|
} else if (type == 'icon2') {
|
this.plotSaveType = 7
|
color = '#ff0000'
|
} else if (type == 'icon3') {
|
this.plotSaveType = 8
|
color = '#ff0000'
|
} else if (type == 'icon4') {
|
this.customImageShow = true
|
this.plotSaveType = 11
|
color = '#ff0000'
|
} else {
|
color = '#1e32e6'
|
}
|
|
this.isNeedPolygonType = false
|
this.choosePlotColor = color
|
this.polygonRemark = ''
|
this.choosePlotColorAlpha = 100
|
this.polygonAddVisible = true
|
},
|
|
addPopupShow (positions, type, altitude) {
|
polygonAltArray = altitude
|
polygonPlotData = positions
|
this.plotSaveType = type
|
this.choosePlotColor = '#409EFF'
|
this.polygonRemark = ''
|
this.choosePlotColorAlpha = 48
|
this.customImageShow = false
|
|
if (type == 5) {
|
this.polygonAreaType = 1
|
this.isNeedPolygonType = false
|
} else {
|
this.isNeedPolygonType = false
|
}
|
|
this.polygonName = ''
|
this.polygonAddVisible = true
|
},
|
|
setCurOver (e) {
|
plotOverlayData = e
|
|
this.polygonRemark = e.overlay.attrParams.item.remark
|
|
this.curImgUrl = e.overlay.icon
|
|
if (e.overlay.attrParams.item.type == 11) this.customImageShow = true
|
|
this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color.slice(0, 7) : '#409EFF'
|
this.choosePlotColorAlpha = e.overlay.attrParams.color != '' ? Number(e.overlay.attrParams.color.split(',')[1]) : 100
|
|
if (e.overlay.attrParams.item.type == 5) {
|
this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1
|
this.isNeedPolygonType = false
|
} else {
|
this.isNeedPolygonType = false
|
}
|
|
// this.polygonName = e.overlay.attrParams.name
|
if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
|
this.plotId = e.overlay.attrParams.id
|
this.editPlotVisible = true
|
}
|
},
|
|
// 计算透明度值
|
formatTooltip (val) {
|
return val / 100
|
},
|
|
// 删除标绘
|
deletePlot () {
|
this.$confirm('确定要删除吗？', '提示', {
|
cancelButtonClass: "btn-custom-cancel",
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'draw-delete-confirm'
|
}).then(() => {
|
this.deleteSecurityPlot(this.plotId)
|
}).catch(() => { })
|
},
|
|
// 删除标绘接口
|
deleteSecurityPlot (id) {
|
deleteSecurityPlot(id).then(res => {
|
this.editPlotVisible = false
|
if (res.data.success) {
|
plotOverlayData != null && plotOverlayData.overlay != null && plotOverlayData.overlay.remove()
|
if (plotOverlayData != null && plotOverlayData.overlay != null && 'pointOverlayData' in plotOverlayData.overlay.attrParams) {
|
plotOverlayData.overlay.attrParams.pointOverlayData.remove()
|
}
|
this.$EventBus.$emit('activeDeletePolygon')
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '删除失败',
|
type: 'error'
|
})
|
}
|
})
|
},
|
|
// 编辑标绘
|
editPlot () {
|
this.editPlotVisible = false
|
|
this.$parent.plotEdit(plotOverlayData.overlay, 'arrow')
|
},
|
|
// 保存标绘修改
|
savePlot () {
|
this.$parent.updateSecurityPlot({
|
id: plotOverlayData.overlay.attrParams.id,
|
color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
|
remark: this.polygonRemark,
|
icon: this.curImgUrl
|
}, plotOverlayData.overlay)
|
this.editPlotVisible = false
|
},
|
|
// 是否显示类型选择
|
typeChangeShow (flag) {
|
this.isNeedPolygonType = flag
|
},
|
|
// 取消保存多边形
|
cancelSavePolygon () {
|
this.polygonAddVisible = false
|
this.$parent.removeDrawArrow()
|
},
|
|
// 保存绘制区域
|
savePolygonInfo () {
|
let positionStr = ''
|
let iconUrl = {}
|
if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
|
positionStr = polygonPlotData
|
} else if (this.plotSaveType == 5) {
|
positionStr = polygonPlotData
|
} else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) {
|
positionStr = polygonPlotData + ',' + polygonPlotData
|
} else if (this.plotSaveType == 10) {
|
positionStr = polygonPlotData
|
} else if (this.plotSaveType == 11) {
|
positionStr = polygonPlotData + ',' + polygonPlotData
|
iconUrl = { iconUrl: this.curImgUrl }
|
}
|
|
this.addSecurityPlot({
|
securityId: this.showingSecurityId,
|
position: positionStr,
|
type: this.plotSaveType,
|
color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
|
remark: this.polygonRemark,
|
areaType: this.polygonAreaType,
|
altitude: polygonAltArray,
|
...iconUrl
|
})
|
this.polygonAddVisible = false
|
},
|
|
// 保存标绘箭头
|
// securityIdid, position坐标, type标绘类型, name多边形名称,color标绘颜色,aera_type多边形类型
|
addSecurityPlot (params) {
|
addSecurityPlot(params).then(res => {
|
if (res.data.success) {
|
this.$parent.addNewPlot(res.data.data)
|
this.$EventBus.$emit('activeDeletePolygon')
|
|
polygonAltArray = []
|
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '保存失败',
|
type: 'error'
|
})
|
}
|
})
|
}
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
