~admin/srs-police-affairs.git

			@@ -1,58 +1,140 @@
			<template>
			<div>
			<el-dialog title="修改标绘" :modal="false" :visible.sync="editPlotVisible" :close-on-click-modal="true"
			class="edit-plot-box">
			<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="value-name-box">选择标绘颜色：</div>
			<div class="pick-color-box">
			<el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
			</el-color-picker>
			<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>
			<div v-show="!polygonName" class="placeholder"></div>
			<div>
			<div class="value-name-box">设置透明度：</div>
			<div class="alpha">
			<el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>

			<div class="line" v-show="restSelectBox">
			<div class="value-name-box">选择类型：</div>
			<div class="select-type" style="flex: 1;">
			<el-select size="small" v-model="restPlotType" placeholder="请选择类型">
			<el-option v-for="item in restPlotSelectArray" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			</el-select>
			</div>
			</div>
			</div>
			<div v-show="!polygonName" class="placeholder"></div>
			<div class="edit-plot-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 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="新增标绘" :modal="false" :visible.sync="polygonAddVisible" :close-on-click-modal="true"
			class="add-polygon-box" :before-close="cancelSavePolygon">
			<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>
			<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>
			<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 class="line" v-show="restSelectBox">
			<div class="value-name-box">选择类型：</div>
			<div class="select-type" style="flex: 1;">
			<el-select size="small" v-model="restPlotType" placeholder="请选择类型">
			<el-option v-for="item in restPlotSelectArray" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			</el-select>
			</div>
			</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 class="line" v-show="isNeedPolygonType">
			<div class="value-name-box">选择类型：</div>
			<div class="select-type" style="flex: 1;">
			<el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型"
			@change="polygonAreaTypeChange">
			<el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
			:value="item.value"></el-option>
			</el-select>
			</div>
			</div>
			</div>
			<div class="placeholder" v-show="!isNeedPolygonType"></div>
			<div class="add-polygon-btn-box">
			<el-button @click="savePolygonInfo">保存</el-button>
			<el-button @click="cancelSavePolygon">取消</el-button>

			<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" v-show="warningImageShow">
			<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="warningImgUrl" alt
			style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;" />
			</el-button>
			<Warning-select v-show="imagesListShow" @curClick="curClick"></Warning-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 v-show="customImageShow" style="font-size: 12px;">
			<span>建议图像格式：png、尺寸：32x32、大小：10kb以内</span>
			</div>

			<div class="btn-box">
			<el-button @click="savePolygonInfo">保存</el-button>
			<el-button @click="cancelSavePolygon">取消</el-button>
			</div>
			</div>
			</el-dialog>
			</div>
			@@ -71,7 +153,7 @@
			export default {
			inject: ['userInfo'],

			props: ['showingSecurityId'],
			props: ['showingSecurityId', 'activityDeptId'],

			data () {
			return {
			@@ -94,6 +176,7 @@
			'#c7158577'
			],
			choosePlotColor: '#409EFF',
			polygonRemark: '',
			choosePlotColorAlpha: 48,
			polygonAreaType: 1,
			isNeedPolygonType: false,
			@@ -102,20 +185,60 @@

			polygonAreaOption: [{
			value: 1,
			label: '核心区'
			label: '多边形'
			}, {
			value: 2,
			label: '缓冲区'
			label: '跑马灯'
			}, {
			value: 3,
			label: '瀑布墙'
			}],

			warningImageShow: false,

			restPlotSelectArray: [
			{
			value: 6,
			label: '群众',
			},
			{
			value: 7,
			label: '关注对象',
			},
			{
			value: 8,
			label: '其他对象',
			},
			],

			plotId: '',

			customImageShow: false,
			imagesListShow: false,
			restPlotType: 6,
			restSelectBox: false,
			curImgUrl: '/img/icon/custom.png',
			warningImgUrl: '/images/jjx3.png'
			}
			},
			methods: {
			curClick (item, type) {
			if (type == 1) {
			this.curImgUrl = item
			} else {
			this.warningImgUrl = item
			}

			this.imagesListShow = false
			},

			addPointPopupShow (type, positions) {
			polygonAltArray = `${positions.alt},${positions.alt}`
			polygonPlotData = `${positions.lng} ${positions.lat}`

			this.customImageShow = false
			this.restSelectBox = false
			this.warningImageShow = false
			this.restPlotType = 6
			let color = ''

			if (type == 'icon1') {
			@@ -127,12 +250,20 @@
			} else if (type == 'icon3') {
			this.plotSaveType = 8
			color = '#ff0000'
			} else if (type == 'icon4') {
			this.customImageShow = true
			this.plotSaveType = 11
			color = '#ff0000'
			} else if (type == 'icon5') {
			this.restSelectBox = true
			color = '#ff0000'
			} else {
			color = '#1e32e6'
			}

			this.isNeedPolygonType = false
			this.choosePlotColor = color
			this.polygonRemark = ''
			this.choosePlotColorAlpha = 100
			this.polygonAddVisible = true
			},
			@@ -142,11 +273,15 @@
			polygonPlotData = positions
			this.plotSaveType = type
			this.choosePlotColor = '#409EFF'
			this.polygonRemark = ''
			this.choosePlotColorAlpha = 48
			this.customImageShow = false
			this.warningImageShow = false
			this.restSelectBox = false

			if (type == 5) {
			this.polygonAreaType = 1
			this.isNeedPolygonType = false
			this.isNeedPolygonType = true
			} else {
			this.isNeedPolygonType = false
			}
			@@ -156,7 +291,22 @@
			},

			setCurOver (e) {
			this.restSelectBox = false
			this.customImageShow = false
			this.warningImageShow = false

			plotOverlayData = e

			this.polygonRemark = e.overlay.attrParams.item.remark

			this.curImgUrl = e.overlay.icon

			if (e.overlay.attrParams.item.type == 6 \|\| e.overlay.attrParams.item.type == 7 \|\| e.overlay.attrParams.item.type == 8) {
			this.restPlotType = e.overlay.attrParams.item.type
			this.restSelectBox = true
			}

			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
			@@ -183,6 +333,7 @@
			// 删除标绘
			deletePlot () {
			this.$confirm('确定要删除吗？', '提示', {
			cancelButtonClass: "btn-custom-cancel",
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
			@@ -201,6 +352,7 @@
			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'
			@@ -223,7 +375,17 @@

			// 保存标绘修改
			savePlot () {
			this.$parent.updateSecurityPlot({ id: plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha }, plotOverlayData.overlay)
			let obj = {}
			if (this.restSelectBox == true) {
			obj.type = this.restPlotType
			}
			this.$parent.updateSecurityPlot({
			id: plotOverlayData.overlay.attrParams.id,
			color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
			remark: this.polygonRemark,
			icon: this.curImgUrl,
			...obj
			}, plotOverlayData.overlay)
			this.editPlotVisible = false
			},

			@@ -241,20 +403,37 @@
			// 保存绘制区域
			savePolygonInfo () {
			let positionStr = ''
			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) {
			let iconUrl = {}

			if (this.restSelectBox) {
			positionStr = polygonPlotData + ',' + polygonPlotData
			} else {
			if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
			positionStr = polygonPlotData
			} else if (this.plotSaveType == 5) {
			positionStr = polygonPlotData
			if (this.polygonAreaType == 2) {
			iconUrl = { iconUrl: this.warningImgUrl }
			}
			} 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,
			type: this.restSelectBox ? this.restPlotType : this.plotSaveType,
			color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
			remark: this.polygonRemark,
			areaType: this.polygonAreaType,
			altitude: polygonAltArray
			altitude: polygonAltArray,
			...iconUrl
			})
			this.polygonAddVisible = false
			},
			@@ -265,6 +444,7 @@
			addSecurityPlot(params).then(res => {
			if (res.data.success) {
			this.$parent.addNewPlot(res.data.data)
			this.$EventBus.$emit('activeDeletePolygon')

			polygonAltArray = []

			@@ -279,8 +459,11 @@
			})
			}
			})
			}
			},

			polygonAreaTypeChange (e) {
			e == 2 ? this.warningImageShow = true : this.warningImageShow = false
			}
			},
			}
			</script>