| | |
| | | <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="请选择区域类型"> |
| | | <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"> |
| | | <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> |
| | |
| | | '#c7158577' |
| | | ], |
| | | choosePlotColor: '#409EFF', |
| | | polygonRemark: '', |
| | | choosePlotColorAlpha: 48, |
| | | polygonAreaType: 1, |
| | | isNeedPolygonType: false, |
| | |
| | | |
| | | 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 |
| | | |
| | | this.imagesListShow = false |
| | | }, |
| | | |
| | | addPointPopupShow (type, positions) { |
| | | polygonAltArray = `${positions.alt},${positions.alt}` |
| | | polygonPlotData = `${positions.lng} ${positions.lat}` |
| | | |
| | | this.customImageShow = false |
| | | this.restSelectBox = false |
| | | this.restPlotType = 6 |
| | | let color = '' |
| | | |
| | | if (type == 'icon1') { |
| | |
| | | } 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 |
| | | }, |
| | |
| | | polygonPlotData = positions |
| | | this.plotSaveType = type |
| | | this.choosePlotColor = '#409EFF' |
| | | this.polygonRemark = '' |
| | | this.choosePlotColorAlpha = 48 |
| | | this.customImageShow = false |
| | | |
| | | if (type == 5) { |
| | | this.polygonAreaType = 1 |
| | | this.isNeedPolygonType = false |
| | | this.isNeedPolygonType = true |
| | | } else { |
| | | this.isNeedPolygonType = false |
| | | } |
| | |
| | | }, |
| | | |
| | | 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 |
| | | |
| | | 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 |
| | |
| | | // 删除标绘 |
| | | deletePlot () { |
| | | this.$confirm('确定要删除吗?', '提示', { |
| | | cancelButtonClass: "btn-custom-cancel", |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | |
| | | 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' |
| | |
| | | |
| | | // 保存标绘修改 |
| | | 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 |
| | | }, |
| | | |
| | |
| | | // 保存绘制区域 |
| | | 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 |
| | | } 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 |
| | | }, |
| | |
| | | addSecurityPlot(params).then(res => { |
| | | if (res.data.success) { |
| | | this.$parent.addNewPlot(res.data.data) |
| | | this.$EventBus.$emit('activeDeletePolygon') |
| | | |
| | | polygonAltArray = [] |
| | | |