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 | 171 +++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 131 insertions(+), 40 deletions(-)
diff --git a/src/views/activity/components/polygonPlot.vue b/src/views/activity/components/polygonPlot.vue
index b97cbb1..21445f7 100644
--- a/src/views/activity/components/polygonPlot.vue
+++ b/src/views/activity/components/polygonPlot.vue
@@ -10,16 +10,25 @@
</div>
</div>
- <div class="line" v-show="customImageShow">
- <div class="value-name-box">
- 选择图片：
+ <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 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;">
+ <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>
@@ -27,8 +36,8 @@
<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>
+ <el-color-picker v-model="choosePlotColor" :predefine="predefineColors"
+ size="small"></el-color-picker>
</div>
</div>
@@ -46,12 +55,10 @@
<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>
@@ -60,10 +67,21 @@
</div>
</div>
+ <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 class="line" v-show="isNeedPolygonType">
<div class="value-name-box">选择类型：</div>
- <div class="select-type">
- <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
+ <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>
@@ -71,24 +89,34 @@
</div>
<div class="line" v-show="customImageShow">
- <div class="value-name-box">
- 选择图片：
- </div>
+ <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;">
+ <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>
+ <el-color-picker v-model="choosePlotColor" :predefine="predefineColors"
+ size="small"></el-color-picker>
</div>
</div>
@@ -99,12 +127,15 @@
</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>
</template>
@@ -122,7 +153,7 @@
export default {
inject: ['userInfo'],
- props: ['showingSecurityId'],
+ props: ['showingSecurityId', 'activityDeptId'],
data () {
return {
@@ -154,22 +185,49 @@
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,
-
- curImgUrl: '/img/icon/custom.png'
+ restPlotType: 6,
+ restSelectBox: false,
+ curImgUrl: '/img/icon/custom.png',
+ warningImgUrl: '/images/jjx3.png'
}
},
methods: {
- curClick (item) {
- this.curImgUrl = item.url
+ curClick (item, type) {
+ if (type == 1) {
+ this.curImgUrl = item
+ } else {
+ this.warningImgUrl = item
+ }
this.imagesListShow = false
},
@@ -178,6 +236,9 @@
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') {
@@ -192,6 +253,9 @@
} else if (type == 'icon4') {
this.customImageShow = true
this.plotSaveType = 11
+ color = '#ff0000'
+ } else if (type == 'icon5') {
+ this.restSelectBox = true
color = '#ff0000'
} else {
color = '#1e32e6'
@@ -212,10 +276,12 @@
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
}
@@ -225,11 +291,20 @@
},
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
@@ -300,11 +375,16 @@
// 保存标绘修改
savePlot () {
+ 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
+ icon: this.curImgUrl,
+ ...obj
}, plotOverlayData.overlay)
this.editPlotVisible = false
},
@@ -324,23 +404,31 @@
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) {
+
+ if (this.restSelectBox) {
positionStr = polygonPlotData + ',' + polygonPlotData
- } else if (this.plotSaveType == 10) {
- positionStr = polygonPlotData
- } else if (this.plotSaveType == 11) {
- positionStr = polygonPlotData + ',' + polygonPlotData
- iconUrl = { iconUrl: this.curImgUrl }
+ } 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,
@@ -371,8 +459,11 @@
})
}
})
- }
+ },
+ polygonAreaTypeChange (e) {
+ e == 2 ? this.warningImageShow = true : this.warningImageShow = false
+ }
},
}
</script>
--
Gitblit v1.9.3