|
|
|
<template>
|
<div>
|
<el-dialog :title="lineEditTitle" :visible.sync="lineEditVisible" :modal="true" :close-on-click-modal="false"
|
:modal-append-to-body="true" :append-to-body="true" class="edit-line-box" :before-close="cancelSaveLine">
|
<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="lineRemark" placeholder="请输入..." />
|
</div>
|
</div>
|
<div class="line">
|
<div class="value-name-box">设置缓冲范围：</div>
|
<div class="input-width-box">
|
<input type="text" v-model="lineWidth" placeholder="请输入..." />
|
</div>
|
<div class="units">米</div>
|
</div>
|
<div class="line">
|
<div class="value-name-box">选择范围颜色：</div>
|
<div class="pick-color-box">
|
<el-color-picker v-model="chooseColor" :predefine="predefineColors" size="small">
|
</el-color-picker>
|
</div>
|
</div>
|
<div class="btn-box">
|
<el-button @click="lookStartVideo" v-show="isLineEdit">查看视频</el-button>
|
<el-button @click="editLineInfo" v-show="isLineEdit">编辑</el-button>
|
<el-button @click="saveLineInfo" v-show="isLineEdit">保存</el-button>
|
<el-button @click="deleteLine" v-show="isLineEdit">删除</el-button>
|
<el-button @click="addLineInfo" v-show="!isLineEdit">添加</el-button>
|
<el-button @click="cancelSaveLine">取消</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { deleteActivityCar, addCarAndRange } from '@/api/activity/index.js'
|
let polylineOverlay = null
|
let curLinePosition = null
|
let curLinePolygonPosition = null
|
|
let polylinePlotData = ''
|
let polygonAltArray = ''
|
export default {
|
inject: ['userInfo'],
|
|
props: ['showingSecurityId'],
|
|
data () {
|
return {
|
lineEditTitle: '修改巡逻路线',
|
isLineEdit: true,
|
lineRemark: "",
|
lineWidth: 100,
|
chooseColor: '#1CA085',
|
policeIconId: {},
|
lineEditVisible: false,
|
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'
|
],
|
}
|
},
|
|
methods: {
|
addPopupShow (positions, altitude) {
|
this.lineEditTitle = '新增巡逻路线'
|
this.chooseColor = '#1CA085'
|
this.lineRemark = ''
|
this.lineWidth = 100
|
this.isLineEdit = false
|
polygonAltArray = altitude
|
polylinePlotData = positions
|
this.lineEditVisible = true
|
},
|
|
setConfig (params) {
|
Object.keys(params).forEach(item => {
|
this[item] = params[item]
|
})
|
},
|
|
setOverlay (e) {
|
polylineOverlay = e
|
|
curLinePosition = e.overlay.attrParams.linePositionStr
|
curLinePolygonPosition = e.overlay.attrParams.polygonPositionStr
|
|
this.lineRemark = e.overlay.attrParams.remark
|
this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
|
this.chooseColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#1CA085'
|
this.policeIconId = e.overlay.attrParams.id
|
},
|
|
lookStartVideo () {
|
this.$parent.lookStartVideo(curLinePosition, curLinePolygonPosition)
|
|
this.lineEditVisible = false
|
},
|
|
// 修改巡逻路线位置信息
|
editLineInfo () {
|
const polyline = polylineOverlay
|
|
this.$EventBus.$emit('mapRemovePolygon', {
|
layerName: 'newCarDrawLineLayers',
|
type: 'VectorLayer',
|
overlay: polyline.overlay
|
})
|
|
this.$parent.plotEdit(polyline.overlay, 'line')
|
|
this.lineEditVisible = false
|
},
|
|
// 保存巡逻路线信息
|
saveLineInfo () {
|
this.$parent.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth, remark: this.lineRemark }, polylineOverlay.overlay)
|
this.lineEditVisible = false
|
},
|
|
// 删除巡逻路线
|
deleteLine () {
|
this.$confirm('确定要删除吗？', '提示', {
|
cancelButtonClass: "btn-custom-cancel",
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'draw-delete-confirm'
|
}).then(() => {
|
this.deleteActivityCar(this.policeIconId)
|
}).catch(() => { })
|
},
|
|
// 删除警车
|
deleteActivityCar (id) {
|
deleteActivityCar(id).then(res => {
|
this.lineEditVisible = false
|
if (res.data.success) {
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
polylineOverlay.overlay.remove()
|
polylineOverlay.overlay.attrParams.lineObj.remove()
|
this.$EventBus.$emit('activeDeleteLineOrPoint', 'policecar')
|
} else {
|
this.$message({
|
message: '删除失败',
|
type: 'error'
|
})
|
}
|
})
|
},
|
|
// 新增巡逻路线信息
|
addLineInfo () {
|
this.addCarAndRange({
|
position: polylinePlotData,
|
altitude: polygonAltArray,
|
securityId: this.showingSecurityId,
|
type: 1,
|
color: this.chooseColor,
|
width: this.lineWidth,
|
remark: this.lineRemark
|
})
|
},
|
|
// 添加警车和范围
|
// carId警车id, position坐标, securityIdid, type线面类型，width缓存范围，color范围颜色
|
addCarAndRange (params) {
|
addCarAndRange(params).then(res => {
|
this.lineEditVisible = false
|
|
if (res.data.success) {
|
this.$parent.addNewPolice(res.data.data, 'policecar', params.type)
|
this.$EventBus.$emit('activeDeleteLineOrPoint', 'policecar')
|
|
this.$message({
|
message: '添加成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '添加失败',
|
type: 'error'
|
})
|
}
|
})
|
},
|
|
// 取消保存巡逻路线
|
cancelSaveLine () {
|
this.lineEditVisible = false
|
this.$parent.removeDrawArrow()
|
},
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
