From 85fb13abbeadc1765d2c0056ba99c6c19aa35dfd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sun, 09 Apr 2023 03:44:49 +0800
Subject: [PATCH] 电子沙盘的调整
---
src/views/activity/components/polygonPlot.vue | 186 +++++++++++++++++++++++++++++++---------------
1 files changed, 124 insertions(+), 62 deletions(-)
diff --git a/src/views/activity/components/polygonPlot.vue b/src/views/activity/components/polygonPlot.vue
index 257da4a..b97cbb1 100644
--- a/src/views/activity/components/polygonPlot.vue
+++ b/src/views/activity/components/polygonPlot.vue
@@ -1,74 +1,110 @@
<template>
<div>
<el-dialog title="修改标绘" :visible.sync="editPlotVisible" :modal="true" :close-on-click-modal="false"
- :modal-append-to-body="false" class="edit-plot-box">
+ :modal-append-to-body="true" :append-to-body="true" class="edit-plot-box">
<div>
- <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 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 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>
- <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>
- </div>
-
- <div>
- <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="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>
</el-dialog>
<el-dialog title="新增标绘" :visible.sync="polygonAddVisible" :modal="true" :close-on-click-modal="false"
- :modal-append-to-body="false" class="add-polygon-box" :before-close="cancelSavePolygon">
- <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="请输入..." />
+ :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 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>
+ </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;">
+ </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="savePolygonInfo">保存</el-button>
+ <el-button @click="cancelSavePolygon">取消</el-button>
</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="请选择区域类型">
- <el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
- </el-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="add-polygon-btn-box">
- <el-button @click="savePolygonInfo">保存</el-button>
- <el-button @click="cancelSavePolygon">取消</el-button>
- </div>
</el-dialog>
</div>
</template>
@@ -125,13 +161,23 @@
}],
plotId: '',
+ customImageShow: false,
+ imagesListShow: false,
+
+ curImgUrl: '/img/icon/custom.png'
}
},
methods: {
+ curClick (item) {
+ this.curImgUrl = item.url
+
+ this.imagesListShow = false
+ },
+
addPointPopupShow (type, positions) {
polygonAltArray = `${positions.alt},${positions.alt}`
polygonPlotData = `${positions.lng} ${positions.lat}`
-
+ this.customImageShow = false
let color = ''
if (type == 'icon1') {
@@ -142,6 +188,10 @@
color = '#ff0000'
} else if (type == 'icon3') {
this.plotSaveType = 8
+ color = '#ff0000'
+ } else if (type == 'icon4') {
+ this.customImageShow = true
+ this.plotSaveType = 11
color = '#ff0000'
} else {
color = '#1e32e6'
@@ -161,6 +211,7 @@
this.choosePlotColor = '#409EFF'
this.polygonRemark = ''
this.choosePlotColorAlpha = 48
+ this.customImageShow = false
if (type == 5) {
this.polygonAreaType = 1
@@ -176,7 +227,12 @@
setCurOver (e) {
plotOverlayData = e
- this.polygonRemark = e.overlay.attrParams.remark
+ this.polygonRemark = e.overlay.attrParams.item.remark
+
+ this.curImgUrl = e.overlay.icon
+
+ 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
@@ -247,7 +303,8 @@
this.$parent.updateSecurityPlot({
id: plotOverlayData.overlay.attrParams.id,
color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
- remark: this.polygonRemark
+ remark: this.polygonRemark,
+ icon: this.curImgUrl
}, plotOverlayData.overlay)
this.editPlotVisible = false
},
@@ -266,6 +323,7 @@
// 保存绘制区域
savePolygonInfo () {
let positionStr = ''
+ let iconUrl = {}
if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
positionStr = polygonPlotData
} else if (this.plotSaveType == 5) {
@@ -274,6 +332,9 @@
positionStr = polygonPlotData + ',' + polygonPlotData
} else if (this.plotSaveType == 10) {
positionStr = polygonPlotData
+ } else if (this.plotSaveType == 11) {
+ positionStr = polygonPlotData + ',' + polygonPlotData
+ iconUrl = { iconUrl: this.curImgUrl }
}
this.addSecurityPlot({
@@ -283,7 +344,8 @@
color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
remark: this.polygonRemark,
areaType: this.polygonAreaType,
- altitude: polygonAltArray
+ altitude: polygonAltArray,
+ ...iconUrl
})
this.polygonAddVisible = false
},
--
Gitblit v1.9.3