From f13afcb61276061871b30bce17a7877287df0b67 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 20 Jan 2024 09:56:43 +0800
Subject: [PATCH] 1
---
src/views/activity/components/polygonPlot.vue | 299 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 241 insertions(+), 58 deletions(-)
diff --git a/src/views/activity/components/polygonPlot.vue b/src/views/activity/components/polygonPlot.vue
index d9c94d4..21445f7 100644
--- a/src/views/activity/components/polygonPlot.vue
+++ b/src/views/activity/components/polygonPlot.vue
@@ -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>
--
Gitblit v1.9.3