From e24f70ababdee2b4fdce71c6b80a9bc928fa0331 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 08 May 2023 14:45:08 +0800
Subject: [PATCH] 警情排行调整
---
src/views/activity/components/polygonPlot.vue | 128 +++++++++++++++++++++++++++++++-----------
1 files changed, 93 insertions(+), 35 deletions(-)
diff --git a/src/views/activity/components/polygonPlot.vue b/src/views/activity/components/polygonPlot.vue
index b97cbb1..00c171c 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,9 +67,19 @@
</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">
+ <div class="select-type" style="flex: 1;">
<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>
@@ -71,14 +88,12 @@
</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>
@@ -87,8 +102,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>
@@ -99,12 +114,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>
@@ -154,22 +172,39 @@
polygonAreaOption: [{
value: 1,
- label: '核心区'
+ label: '多边形'
}, {
value: 2,
- label: '缓冲区'
+ label: '电子围栏'
}],
+
+ restPlotSelectArray: [
+ {
+ value: 6,
+ label: '群众',
+ },
+ {
+ value: 7,
+ label: '关注对象',
+ },
+ {
+ value: 8,
+ label: '其他对象',
+ },
+ ],
+
plotId: '',
customImageShow: false,
imagesListShow: false,
-
+ restPlotType: 6,
+ restSelectBox: false,
curImgUrl: '/img/icon/custom.png'
}
},
methods: {
curClick (item) {
- this.curImgUrl = item.url
+ this.curImgUrl = item
this.imagesListShow = false
},
@@ -178,6 +213,8 @@
polygonAltArray = `${positions.alt},${positions.alt}`
polygonPlotData = `${positions.lng} ${positions.lat}`
this.customImageShow = false
+ this.restSelectBox = false
+ this.restPlotType = 6
let color = ''
if (type == 'icon1') {
@@ -192,6 +229,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'
@@ -215,7 +255,7 @@
if (type == 5) {
this.polygonAreaType = 1
- this.isNeedPolygonType = false
+ this.isNeedPolygonType = true
} else {
this.isNeedPolygonType = false
}
@@ -225,11 +265,19 @@
},
setCurOver (e) {
+ this.restSelectBox = false
+ this.customImageShow = 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 +348,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 +377,28 @@
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
+ } 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,
--
Gitblit v1.9.3